I have two sortable lists, one being nested, with a mouse enter effect on the li elements of the nested sortable list. My problem is that the mouseenter and mouseleave functions are being called inconsistently when a user moves the mouse quickly through the list over the child elements which are input fields.
Here is a sample of what is happening, you have to drag a pane into the list and then drag 3-4 textbox items into the pane to be able to see the problem. You can see the 2 numbers in the top right are keeping track of the in/out of the mouse. Note I have only tested my site in firefox 3.5.7 thus far. The problem appears to be fixed in Firefox version 3.6 but I need this to work on all previous versions of Firefox 3.x
My jquery 1.4.1 code:
Here are the mouseenter and mouseleave functions:
$(".pane > li").live("mouseover", function(){
$("#in").html(in1);
$(this).children(".test").stop().animate({opacity: 1},400);
in1++;
});
$(".pane > li").live("mouseout", function(){
$("#out").html(out1);
$(this).children(".test").stop().animate({opacity: 0},400);
out1++;
});
I have attempted to assign the mouseenter and mouseleave functions without using live() when I call the function that adds the li elements dynamically into the page. However, the problem still persists and you can see errors cropping up in firebug debugger. Perhaps it has something to do with relatedTarget in Firefox. Thanks for any assistance.