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...

Works fine for me (unbinding hover via unbinding `mouseenter` and `mouseleave`) in which context are you calling `enable_continue_button()` ? Btw your `addClass` function is wrong, you should remove the comma. Based on that, are you sure that `faded` and `tt` are added as classes? Maybe calling `nable_continue_button()` fails *and* the clases are not added so it just seems they got removed. — Felix Kling, Feb 06 '11 at 18:58
@felix - Sorry comma was a typo here on SO. Weird it's working for you! — Haroldo, Feb 07 '11 at 08:48
Ok. See here http://jsfiddle.net/ebpM3/ So you can definitely unbind `hover` this way (the text does not turn red). Do you get any error message and are you sure that the classes are removed (i.e. `enable_continue_button` is called)?. — Felix Kling, Feb 07 '11 at 08:55

Russ Cam · Accepted Answer · 2011-02-08T14:52:28.833

5

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.

edited Feb 08 '11 at 14:52

answered Feb 06 '11 at 18:49

Russ Cam

124,184
33
204
266

1

Just mouseenter/mouseleave is enough. These are jQuery events (unlike hover - you can check that by inspecting jQuery.event.special), so even if the browser does not have a native mouseenter event, that is the name the event handler will be bound to. – Tgr Feb 06 '11 at 22:09
Hi you're example definitely works, so there must be something wrong with my code somewhere. It's wierd my `enable_continue_button()` function is definitely removing the classes but not unbinding the tooltip... – Haroldo Feb 08 '11 at 10:52

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

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

edited May 23 '17 at 12:33

Community

1
1

answered Feb 06 '11 at 17:28

jocull

20,008
22
105
149

Not sure, but it may be a place to start and work backwards. You could also try using jQuery's `.live()` and tie the events to the classes you are removing. That should unbind the events when you remove the classes. http://api.jquery.com/live/ – jocull Feb 06 '11 at 18:37

jquery: Cant unbind hover event?

2 Answers2