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”。解析'background-color'的值时出错。宣言下降。行：0

Firebug返回太多的递归。

如果单击实际复选框时单击标签会有什么不同？

Answer 1

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

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

Answer 2

根据方法的jQuery文档，如果您使用课程“appendTo”或其他方法，则“remove”不需要此方法。我宁愿不需要使用“克隆”，在我看来代码可能是这样的，并且在某些时候我遇到了双引号和单引号（"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);
        });

});

实际点击复选框时，jquery复选框实时点击事件阻塞firefox

2 个答案: