Clone div with all nested elements along with events in pure javascript

Question

I am trying to clone a div which has input fields. But the eventListeners are not being fired.

Even though I am doing a deep clone in the following way -

var rows = document.querySelectorAll('.row');
var dupNode = rows[0].cloneNode(true);
sheet.appendChild(dupNode);

Here is the Demo

Each input has a click event and the cloned inputs are not registering with the click event. What am I missing ?

from the demo, the click event was triggered, which event do you mean exactly? — ChinKang, Dec 31 '14 at 13:31
@ChinKang Click on add row and then click on the new row's inputs — Ajey, Dec 31 '14 at 13:33
[Check this link](http://stackoverflow.com/questions/16939335/clone-element-with-all-its-events) — anpsmn, Dec 31 '14 at 13:33

score 1 · Accepted Answer · answered Dec 31 '14 at 13:36

The simplest (and the most effective) thing to do is to bind single event listener on the #sheet container and benefit from event bubbling. In this case you can append as many new elements as you wish and will never need to bind events to them:

document.querySelector('#sheet').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName == 'INPUT') {
        alert("clicked");
    }
}, false);

A little tricky part is that you need to check on what element event occurred and execute your code on those only you are interested in.

Demo: http://jsbin.com/mejegaqasu/1/edit?html,js,output

One thing to watch for: this only works for events that bubble, and not all of them do. Some, like focus and blur, aren't supposed to bubble according to the standard, but some browsers have bugs. The change event is especially painful if you have to work in IE8 and under, because it doesn't bubble there (even though it should). — The Spooniest, Dec 31 '14 at 14:21

score 0 · Answer 2 · answered Dec 31 '14 at 13:36

Event handlers are not copied during cloning. You will need to delegate the event handlers if you want them to work everywhere in the DOM after cloning.

Event delegation http://davidwalsh.name/event-delegate cloneNode documentation https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

Clone div with all nested elements along with events in pure javascript

2 Answers2

Demo: http://jsbin.com/mejegaqasu/1/edit?html,js,output