setInterval /clearInterval dropdown issues

Question

Hi, I want to make a dropdown menu using jquery, but it closes even it shouldn't.

I have an element which is subscribed to the mouseenter event, mouse enters the element, the dropdown, fires up, everything seems to be ok. I go down to the item list which is list element with some content in it. The first time i change the two elements everything works as is expected. So i leave the elements the mouseout event is called and within 1000 ms the list isn't visible anymore. The second time i open the "dropdown" it seems to be ok, but if i go over the list, it disappears like it should when i leave the elements. Some way its logical because every of the two elements (button and list) are subscribed to two events: mouseenter and mouseleave. Mouseenter provides a clearInterval, mouseout provides a setInterval. Data is stored in a variable called tTimer which has a default value from 0. I really dont know why this happens. heres a snipplet from my code:

        var tTimer = 0;
        var rmItemList = function(){itemList.remove(); clearTimeout(tTimer); }

        $(this).bind("mouseleave",function(){ tTimer = window.setTimeout(rmItemList, 1000); });
        itemList.bind("mouseleave",function(){ tTimer = window.setTimeout(rmItemList, 1000); });
        $(this).bind("mouseenter",function(){ window.clearTimeout(tTimer); itemList.appendTo("body"); });
        itemList.bind("mouseenter",function(){ window.clearTimeout(tTimer); });

Answer 1

I'm finding it a little tricky to visualise what you're doing. I see, however, that you are repeatedly adding and removing an element from the DOM. I believe that .remove() removes event handlers from the element. It might well be better to use .show() and .hide() instead.

This would have the additional advantage of much improved performance.