jQuery的切換不會克隆

Question

我已經克隆jQuery中使用.clone列表項工作後：

$("#coll-selected-list li:contains(" + itemName + ")").clone().addClass("avgli").appendTo("#coll-grouped-list"); 

然而，當我想切換新增列表項，它不會爲一些工作原因。任何想法？：

$(document).ready(function() { 
    $(".avgli").toggle(function() { 
     if ($(this).parent().hasClass('agg-drop')) { 
      $(this).css("background", "#fff"); 
     } 
    }, function() { 
     if ($(this).parent().hasClass('agg-drop')) { 
      $(this).css("background", "#676767"); 
     } 
    });); 

<ul id="coll-grouped-list" class="agg-drop"> 
     <li class="sortedli avgli" style="">Blah Blah</li> 
     <li class="sortedli avgli" style="">Blah</li> 
</ul> 

Answer 1

嘗試使用clone(true)來代替。請參閱clone文檔。

toggle函數將事件偵聽器添加到元素，並且您需要克隆這些偵聽器。

Answer 2

活生生的例子：http://jsfiddle.net/K2uke/

而且我已經改變了你的腳本位，所以它不需要雙擊切換效果。

通過添加.clone(true)將克隆元素和事件。

.clone（[withDataAndEvents]）

withDataAndEventsA布爾值指示是否事件處理程序應 與元件一起被複制。

參考：http://api.jquery.com/clone/