jQuery的.clone（true，true）不克隆兒童事件綁定

Question

我使用克隆（true，true）來複制select和一些按鈕來克隆和刪除。 我認爲第二個真正的參數應該確保事件處理程序傳遞給克隆的子按鈕。

下面是標記：

<div id="clone-container"> 
    <div class="clone"> 
     <label for="select1">Select 1</label> 
     <select id="select1" name="select1" class=""> 
      <option>Select One:</option> 
      <option value="1">1</option> 
     </select> 
     <span class="controls"> 
      <a href="#" class="btn add">+</a> 
      <a href="#" class="btn remove">−</a> 
     </span> 
    </div> 
</div>​ 

而且JS：

var $cloned = $('.clone').clone(true, true); 
var $addButton = $(".btn.add"); 
$addButton.on("click", function(e) { 
    e.preventDefault(); 
    var $cloner = $(this).closest(".clone");  
    $cloned.clone().insertAfter($cloner); 
});​ 

，這裏是一個js小提琴： http://jsfiddle.net/cjmemay/yXA4R/

Answer 1

有兩個問題與您的代碼：

1. 原始克隆（$cloned）沒有綁定到按鈕
事件偵聽器
2. 您的第二次調用clone不保留事件

您需要在之後克隆容器您已將事件偵聽器附加到該按鈕。此外，您需要將true參數傳遞給的clone第二次調用：

var $addButton = $(".btn.add"); 
$addButton.on("click", function(e) { 
    e.preventDefault(); 
    var $cloner = $(this).closest(".clone");  
    $cloned.clone(true, true).insertAfter($cloner); 
}); 
var $cloned = $('.clone').clone(true, true); 

這裏是一個演示：http://jsfiddle.net/3hjfj/

Answer 2

這裏是一個工作示例：http://jsfiddle.net/aT5mV/1/

我修改了on事件捕獲.btn.add上的所有點擊，包括動態創建的元素。

var $cloned = $('.clone').clone(); 

$('#clone-container').on("click", '.btn.add', function(e) { 
    e.preventDefault(); 
    var $cloner = $(this).closest(".clone");  
    $cloned.clone().insertAfter($cloner); 
}); 
​ 

Answer 3

嘗試使用.clone(true,true)克隆第二次過

Answer 4

您可以使用jQuery.detach（）代替.clone（真實的，真實的）;

這將是事件和一切