实际单击复选框时，jquery Checkbox live click 事件卡住了 firefox

Question

我指定了以下 jquery 代码：

$('#firstbox ul.checkboxlist input[type="checkbox"]').live('click',function(){
    $(this).parents('li').remove().clone().prependTo('#secondbox ul.checkboxlist').animate({backgroundColor: '#FAEA96'},100, function(){$(this).animate({backgroundColor: '#FFFFFF'},800);});
});

当您单击复选框时，它会获取 li，将其删除，然后将其放入第二个框中。在 IE 中运行良好。如果我单击标签上的文本，它也可以正常工作。但是，如果我直接单击 firefox 上的复选框，firefox 会减慢大约 10/15 秒并记录以下错误：

警告：rgb() 中的预期数字或百分比，但发现“NaN”。解析“背景颜色”的值时出错。声明被放弃。 行：0

Firebug 返回太多递归。

为什么当我点击实际复选框时点击标签会有所不同？

Answer 1

你在使用 jQuery UI 吗？如果要为背景颜色设置动画，则至少需要使用核心效果。另外，您是否尝试过不使用克隆（）？由于您要从上一个列表中删除元素，因此您不需要克隆它们。您也可以尝试使用highlight() 效果——这似乎就是您正在做的事情。

这些都没有解决您关于为什么 FF 似乎以不同方式处理它的确切问题，但希望其中一个能够解决问题。

Answer 2

根据方法“remove”的jQuery文档，如果您使用课程“appendTo”或其他方法，则不需要此方法。 我宁愿不需要使用“克隆”，我认为代码可能是这种方式，并且在某些时候我遇到了双引号和单引号（"input[type='checkbox']"）的问题，因此我以这种方式使用引号.

info for remove()

$("#firstbox ul.checkboxlist").find("input[type='checkbox']").live("click",function(){

    $(this)
        .parents("li")
        .prependTo("#secondbox ul.checkboxlist")
        .animate({backgroundColor: "#FAEA96"},100, function(){
            $(this).animate({backgroundColor: "#FFFFFF"}, 800);
        });

});

编辑： 删除事件点击

$("#firstbox ul.checkboxlist").find("input[type='checkbox']").live("click",function myEventClick(){

    $(this)
        .unbind("click", myEventClick)
        .parents("li")
        .prependTo("#secondbox ul.checkboxlist")
        .animate({backgroundColor: "#FAEA96"},100, function(){
            $(this).animate({backgroundColor: "#FFFFFF"}, 800);
        });

});