Question

我正在尝试克隆一个包含输入字段的div。但是eventListeners没有被解雇。

即使我按以下方式进行深度克隆 -

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

以下是Demo

每个输入都有一个click事件，克隆的输入没有注册click事件。我错过了什么？

Answer 1

最简单（也是最有效）的事情是在#sheet容器上绑定单个事件侦听器，并从事件冒泡中受益。在这种情况下，您可以根据需要添加任意数量的新元素，并且永远不需要将事件绑定到它们：

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

一个棘手的部分是你需要检查发生了什么元素事件，并在你感兴趣的那些事件上执行你的代码。

演示：http://jsbin.com/mejegaqasu/1/edit?html,js,output

Answer 2

在克隆过程中不会复制事件处理程序。如果您希望它们在克隆后在DOM中的任何位置工作，您将需要委派事件处理程序。

活动代表团http://davidwalsh.name/event-delegate cloneNode文档https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

使用所有嵌套元素克隆div以及纯javascript中的事件

2 个答案:

演示：http://jsbin.com/mejegaqasu/1/edit?html,js,output