Javascript Jquery-toggle-won'；克隆后不能工作

我已在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>

$（文档）.ready（函数（）{
$（“.avgli”）.toggle（函数（）{
if（$（this）.parent（）.hasClass（'agg-drop'））{
$（this.css（“背景”，“#fff”）；
}
}，函数（）{
if（$（this）.parent（）.hasClass（'agg-drop'））{
$（this.css（“背景”，“#6767”）；
}
}););

诸如此类
诸如此类

尝试使用

克隆（true）

。请参阅文档

toggle

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

实时示例：

我对你们的脚本做了一些修改，这样就不需要双击来切换效果了

通过添加

。clone（true）

将克隆元素和事件

.clone（[withDataAndEvents]）

使用DataAndEventsa布尔值，指示是否应使用事件处理程序 与元素一起复制

参考：