如何觸發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.