Skip to main content

Bug Tracker

Side navigation

#4165 closed bug (invalid)

Opened February 16, 2009 03:52PM UTC

Closed February 16, 2009 04:59PM UTC

Last modified March 16, 2012 03:39PM UTC

Creating new button through clone() method does not work.

Reported by: kunalkeane Owned by:
Priority: major Milestone: 1.3.2
Component: core Version: 1.3.1
Keywords: Cc:
Blocked by: Blocking:
Description

I created a new row by cloning existing row. Original row contains one text field and one submit button "Add Row" to add new row.

Pressing button in original row calls a function and clones the row however

Pressing Button from cloned row does not call the function.

Any clues?

Attachments (0)
Change History (3)

Changed February 16, 2009 04:50PM UTC by dz comment:1

Not a bug. Use live events, since you're adding new elements to the dom that didn't have that click event bound originally.

For example, this works using .live():

http://jquery.nodnod.net/cases/126

Changed February 16, 2009 04:59PM UTC by john comment:2

component: unfilledcore
resolution: → invalid
status: newclosed

The other option is to use .clone(true) which clones the events along with the element itself.

Changed March 16, 2012 03:39PM UTC by anonymous comment:3

Just wanted to add a comment to explain a bit further.

With jQ 1.7 .live() and many other "shortcuts" are depreciated, and call on .on() instead. I had an almost exact issue to this problem where I was cloning a table row, with an Add Row button in the last cell. I wanted to click the Add Row button, have it clone the row, with the button then remove the button on the row before.

With .on() you need to remember that the events bubble up, so attaching the .on() or .live() events to the button in the first row, will only "bubble" up to that button, instead you need to attach the listener to the table or tbody instead of the button or row. ex,

$('table').on('click', 'button.add_row', function(e) {}); This works.

I was attaching the event listener to the button itself $('button.add_new').on('click', function(e){

//clone the last tr

$(this).remove();

});

It took me a while to figure out that the event handler for 'click' was only attached to the original button, when the new button was cloned I had removed the original button, hence also removing the event handler that was bound to it.

I hope this helps others later on that come across this issue.