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

by

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.

More Related Contents:

  1. Cannot read property ‘addEventListener’ of null using querySelector [closed]
  2. Please anyone tell me what i do that my website display date and time not get reset on refreshing the page
  3. Show image in div and add PREV/NEXT buttons
  4. contenteditable change events
  5. When is JavaScript synchronous?
  6. Adding options to a using jQuery?
  7. Is it possible to listen to a “style change” event?
  8. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘…’ is therefore not allowed access
  9. How to properly use jsPDF library
  10. How to get the element clicked (for the whole document)?
  11. Prevent form redirect OR refresh on submit?
  12. Detect IF hovering over element with jQuery
  13. jQuery.getJSON – Access-Control-Allow-Origin Issue
  14. Add click event to iframe
  15. How to get json key and value in javascript?
  16. Reset select value to default
  17. Filter strings in Array based on content (filter search value)
  18. Restart an animated GIF from JavaScript without reloading the image
  19. Why does $(‘#id’) return true if id doesn’t exist?
  20. Counting and limiting words in a textarea
  21. Slow down scroll to top event by jQuery animate
  22. Disable “Changes you made may not be saved” pop-up window
  23. Proper way to reset a GIF animation with display:none on Chrome
  24. How do object or method chaining work in jQuery?
  25. Clear dropdown using jQuery Select2
  26. Passing JSON data from php to html-data attribute and then to Javascript
  27. How to fire jQuery function only if form is valid
  28. Select2() is not a function
  29. How to keep elements non-refreshed
  30. jQuery selector to target any class name (of multiple present) starting with a prefix?

Leave a Comment