jquery: Cant unbind hover event?

Question

My continue button has a hover event that tells you why it's disabled. The only problem is I can't remove the hover event when I enable the button....

this works

function disable_continue_button(){
    $('#frame_2 > .next')
        .addClass('faded tt')
        .hover(function(){
            $hovered = $(this);
            //tooltip?
            tip = $('.tip.notification.information');
            tip.find('div').html($hovered.attr('tt'));
            tip.fadeIn(150);
        },
        function() {
            tip.hide();   
        })
        .mousemove(function(e) {
            var mousex = e.pageX +40; //Get X coodrinates
            var mousey = e.pageY -20; //Get Y coordinates
            tip.css({top: mousey, left: mousex });
        });    
}

this doesn't work

function enable_continue_button(){
    $('#frame_2 > .next')        
        .unbind('mouseenter mouseleave mousemove')
        .removeClass('faded tt');    
}

the classes are removed ok, but the hover tooltip is not removed...

Answer 1

Try unbinding mouseenter, mouseleave, mouseover and mouseout.

$('#frame_2 > .next').unbind('mouseenter mouseleave mouseover mouseout');

EDIT:

Unbinding just mouseenter and mouseleave is sufficient.

Here's an example to show it working. When the above 4 events are unbound, the tooltip functionality is removed.

.hover(fnEnter, fnLeave) is essentially shorthand for .mouseenter(fnEnter).mouseleave(fnLeave).

Since not all browsers support these two events natively, (if I recall correctly, only IE does), mouseenter() maps to mouseover() and mouseleave() maps to mouseout(), with some additional logic in each case to emulate the events.

Answer 2

This related question may help you unbind everything, and then you could rebind what you need? how to unbind all event using jquery