jQuery Rebinding a hover event (helper).

Question

When the page is done loading I call a function which puts the hover event on $('a.tooltip'). When I want to unbind this event I do the following:

   $('a.tooltip').unbind('mouseover mouseout');

That works! However when I want rebind the hover event and I call the function that was first loaded at document ready again, it doesn't rebind the hover helper. How can I rebind it?

Thank you,

Ice

Answer 1

Are you sure the unbinding is working correctly? In my experience, .hover() does rebind properly, but I have had to use this unbind syntax:

$(this).unbind('mouseenter').unbind('mouseleave');

When I tried putting both events into one unbind(), it only unbound one of them.

I wonder if that's happening for you? (Or if the choice of mouseover vs mouseenter, etc, matters?)

Update

According to quirksmode.org, mouseenter and mouseleave are IE-specific events, but as Jimmy pointed out in the comments, jQuery implements them for other browsers as well.

Answer 2

I found that when I use the bind method, things can be a bit fussy. You might want to try using the hover(over, out) function as such:

 $(this).hover( 
    function() {
       if (okayToHover) { dowhatever; } 
    },
    function() {
       if (okayToUnhover) { undowhatever; }
    });

I know it seems a bit roundabout, but I find that the hover function gives me a bit more control over what's going on, and it seems to work a bit better for whatever reason. That's just in my experience though...