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

Question

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

检查小提琴here。

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');   
}); 

如果我点击一个克隆DIV A，没有任何反应。

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

Answer 1

我提出了两种解决方案。

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

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

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

“

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

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

jsFiddle here.

---

第二个选项，可能不会去为这个例子的方式，是使用on()的事件委派功能：

“委托事件具有以下优势：他们可以处理 后来添加到文档中的后代元素的事件。“ - jQuery API section for on()。

在这种情况下：

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

现在，随着类.A每一个新的元素将是有这个click事件连接到它，甚至克隆元素。

jsFiddle here.