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 comment:1
Changed February 16, 2009 04:59PM UTC by comment:2
component: | unfilled → core |
---|---|
resolution: | → invalid |
status: | new → closed |
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 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.
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