javascript - 克隆后 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)改用。请参阅克隆文档。

toggle函数将事件侦听器添加到元素，您也需要克隆这些侦听器。

Answer 2

现场示例：http: //jsfiddle.net/K2uke/

而且我已经稍微改变了你的脚本，这样就不需要双击来切换效果了。

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

.clone( [withDataAndEvents] )

withDataAndEvents 一个布尔值，指示是否应将事件处理程序与元素一起复制。

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