jQuery clone() not cloning event bindings, even with on()

Question

I have created a series of custom jQuery events for use in mobile web applications. They work great and have been tested. However, I have run into a small problem which I am having trouble understanding.

I am using .clone() on a few elements within the DOM, which contain a button. The button has some of the custom events bound to it (the events are bound using .on()), but. Unfortunately, when I use jQuery's .clone(), the bindings are not preserved, and I have to add them again.

Has anyone encountered this before, does someone know of a potential work around? I thought that using .on() was supposed to preserve the binding for elements that exist now, or in the future?

"I thought that using .on() was supposed to preserve the binding for elements that exist now, or in the future?" - This has little to do with .clone; it's jQuery's event delegation logic and works if you pass an additional selector to .on. — pimvdb
– pimvdb, Commented Mar 3, 2012 at 21:04

Didier Ghys · Accepted Answer · 2017-08-16 12:27:25Z

238

I think you should use this overload of the .clone() method:

$element.clone(true, true);

clone( [withDataAndEvents] [, deepWithDataAndEvents] )

withDataAndEvents: A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false.

deepWithDataAndEvents: A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).

Beware that .on() does not actually bind the events to the targets but to the element you are delegating to. So if you have:

$('#container').on('click', '.button', ...);

The events are actually binded to #container. When a click on a .button element occurs, it bubbles up to the #container element The element which triggered the event is evaluated upon the selector parameter of .on() and if it matches, the event handler is executed. This is how event delegation works.

If you clone the element #container, you have to deep clone with events and data for the bindings made with .on() to be preserved.

This would not be necessary if you were using .on() on a parent of #container.

edited Aug 16, 2017 at 12:27

answered Mar 3, 2012 at 20:43

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BenM Over a year ago

Never knew .clone() accepted arguments. FML. Thanks for your help.

Richard de Wit Over a year ago

@DidierGhys Thanks, I've been struggling with .clone() not cloning the .data() (both data-xxxx="somedata" and data in the DOM).. This fixes it too!

csandreas1 Over a year ago

Excellent, i had to make a click event to append the new cloned div. ready was not working

Collectives™ on Stack Overflow

jQuery clone() not cloning event bindings, even with on()

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related