Question

I have a table where I want to dynamically add a row. This part is working fine and I am using jQuery to insert the new row. The problem is, the row includes two links for ‘edit’ and ‘delete’ which are attached to Colorbox popups. Existing rows work fine with Colorbox, but the new rows attach both links to the ‘new user’ Colorbox, instead of the ‘edit’ or ‘delete’ popups as appropriate.

Another strange behavior is that the links are correctly attached once you click on any of the older links. Steps to recreate:

1. Click on “Add New Person”
2. Click on “Add”
3. Click on “Edit” for the new row – it
   shows the Add New User colorbox
4. Click on “Edit” for one of the
   existing rows
5. Now click on “Edit” for the new row – it correctly shows the Edit colorbox

I have tried to create the simplest test case possible at http://pastebin.com/i8n3t2Yt. If you want to run it on your local machine you’ll have to download the Colorbox JS at http://colorpowered.com/colorbox/.

Answer 1

Because I was creating the new row using .clone(), it wasn’t cloning attached events. Clone has an optional parameter .clone( [ withDataAndEvents ] ), which was previously defaulted to true but changed in 1.6, I believe. I thought that since Colorbox used .live() to attach events, I wouldn’t need to specify true for [ withDataAndEvents ] but apparently I did need to.