javascript - 如何在 DOM 中的克隆/插入元素上触发事件？

Question

我无法在我克隆/插入到 DOM 的元素上触发事件。

在这里检查小提琴。

HTML：

<div class="A">[THIS IS DIV A]</div>
<div class="B">CLICK TO CLONE DIV A</div>

jQuery：

$('.A').on("click",null,function() {    
    alert('DIV A CLICK');           
});

$('.B').on("click",null,function() {        
    $('.A').clone().insertAfter('.A');          
});

如果我单击 clone DIV A，则不会发生任何事情。

如何在克隆元素上触发事件？

Answer 1

我提出了两种解决方案。

首先，在这种情况下，更好的选择是将true参数添加到clone()，例如在这种情况下，它将是：

$('.A').clone(true).insertAfter('.A');

作为clone()表示的第一个参数：

“一个布尔值，指示是否应将事件处理程序和数据与元素一起复制。默认值为 false。” - clone() 的 jQuery API 部分。

这意味着所有绑定事件都将保留在每个克隆元素上。

jsFiddle在这里。

---

第二个选项，可能不是这个例子要走的路，是使用on()'s 事件委托功能：

“委托事件的优势在于，它们可以处理来自后代元素的事件，这些事件会在以后添加到文档中。” - on() 的 jQuery API 部分。

在这种情况下：

$(document).on("click", ".A", function() { ...

现在，每个具有该类的新元素.A都将附加此单击事件，甚至是克隆的元素。

jsFiddle在这里。