jquery Checkbox live click event jams firefox when actually clicking the checkbox

Question

I have the following jquery code specified:

$('#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);});
});

It takes the li, removes it, and puts it into a second box when you click the checkbox. Works fine in IE. Also it works fine if I click the text on the label. However if I directly click the checkbox on firefox, firefox slows right down for about 10/15 seconds and logs these errors:

Warning: Expected number or percentage in rgb() but found 'NaN'. Error in parsing value for 'background-color'. Declaration dropped. Line: 0

Firebug returns Too much recursion.

Why is it different if I click the label to when I click the actual checkbox?

Answer 1

Are you using jQuery UI? If you want to animate the background color you need to use at least the core effects. Also, have you tried it without using the clone()? Since you are removing the elements from the previous list, you shouldn't need to clone them. You might also try using the highlight() effect -- that seems to be be what you are doing.

None of these addresses your exact question of why FF seems to handle it differently, but hopefully one of them will resolve the issue.

Answer 2

According to the jQuery documentation for the method "remove" does not need this method if you are using course "appendTo" or other method. Which I would rather not need to use "clone", in my opinion the code could be this way, and at some point I had problems with double quotes and single quotes ("input[type='checkbox']") for that reason I use the quotes in this way.

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);
     });

});

EDIT: for remove event click

$("#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);
     });

});