113

How do I unbind "hover" in jQuery?

This does not work:

$(this).unbind('hover');
2
  • 2
    Are you trying to unbind a function that you assigned to the hover event, or are you trying to modify an <a></a> hover? Commented Apr 30, 2009 at 2:35
  • To clarify Justin Niessner's question, are you trying to remove Javascript/DOM events, or CSS declarations? The latter is a more complicated matter. Commented May 1, 2009 at 5:29

8 Answers 8

218

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

or more succinctly (thanks @Chad Grant):

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

2
  • 43
    or $(this).unbind('mouseenter mouseleave')
    – Chad Grant
    Commented Apr 30, 2009 at 8:39
  • is it necessary sequence for mouseenter then after mouseleave?
    – sanghavi7
    Commented Oct 5, 2012 at 10:02
72

Actually, the jQuery documentation has a more simple approach than the chained examples shown above (although they'll work just fine):

$("#myElement").unbind('mouseenter mouseleave');

As of jQuery 1.7, you are also able use $.on() and $.off() for event binding, so to unbind the hover event, you would use the simpler and tidier:

$('#myElement').off('hover');

The pseudo-event-name "hover" is used as a shorthand for "mouseenter mouseleave" but was handled differently in earlier jQuery versions; requiring you to expressly remove each of the literal event names. Using $.off() now allows you to drop both mouse events using the same shorthand.

Edit 2016:

Still a popular question so it's worth drawing attention to @Dennis98's point in the comments below that in jQuery 1.9+, the "hover" event was deprecated in favour of the standard "mouseenter mouseleave" calls. So your event binding declaration should now look like this:

$('#myElement').off('mouseenter mouseleave');

5
  • 4
    I have jQuery 1.10.2 and the $.off("hover") does not work. However, using both events works great. Commented Jan 12, 2014 at 6:26
  • Worth mentioning that when multiple filtering arguments are given, all of the arguments provided must match for the event handler to be removed. I also note that the jQuery API docs state that the .off() method removes event handlers that were attached with .on(). Whether that means it ONLY applies to events added using .on(), I'm not sure. But it shouldn't. Commented Jan 25, 2015 at 20:37
  • @AlexisWilke Yep, it got removed in v1.9, look up the last link.. ;)
    – Dennis98
    Commented Jul 8, 2016 at 0:36
  • 1
    @Dennis98 - You're just talking about the jQuery hover hack being moved to deprecated.js, right? the $.off() event binding is still available in later versions of jQuery. Commented Jul 8, 2016 at 1:42
  • Right. :) $.off() is still there, it's the recommended method of unbinding events currently. So as of now you need to write $(element).off("mouseenter mouseleave");.
    – Dennis98
    Commented Jul 8, 2016 at 7:25
10

Unbind the mouseenter and mouseleave events individually or unbind all events on the element(s).

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

or

$(this).unbind();  // assuming you have no other handlers you want to keep
4

unbind() doesn't work with hardcoded inline events.

So, for example, if you want to unbind the mouseover event from <div id="some_div" onmouseover="do_something();">, I found that $('#some_div').attr('onmouseover','') is a quick and dirty way to achieve it.

4

Another solution is .die() for events who that attached with .live().

Ex.:

// attach click event for <a> tags
$('a').live('click', function(){});

// deattach click event from <a> tags
$('a').die('click');

You can find a good refference here: Exploring jQuery .live() and .die()

( Sorry for my english :"> )

2

All hover is doing behind the scenes is binding to the mouseover and mouseout property. I would bind and unbind your functions from those events individually.

For example, say you have the following html:

<a href="#" class="myLink">Link</a>

then your jQuery would be:

$(document).ready(function() {

  function mouseOver()
  {
    $(this).css('color', 'red');
  }
  function mouseOut()
  {
    $(this).css('color', 'blue');
  }

  // either of these might work
  $('.myLink').hover(mouseOver, mouseOut); 
  $('.myLink').mouseover(mouseOver).mouseout(mouseOut); 
  // otherwise use this
  $('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);


  // then to unbind
  $('.myLink').click(function(e) {
    e.preventDefault();
    $('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
  });

});
1
  • Correction, After looking at the jquery src hover is actually binding to mouseenter/mouseleave. You should do the same.
    – bendewey
    Commented Apr 30, 2009 at 2:50
2

You can remove a specific event handler that was attached by on, using off

$("#ID").on ("eventName", additionalCss, handlerFunction);

// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

Using this, you will remove only handlerFunction
Another good practice, is to set a nameSpace for multiple attached events

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);

// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");
0

I found this works as second argument (function) to .hover()

$('#yourId').hover(
    function(){
        // Your code goes here
    },
    function(){
        $(this).unbind()
    }
});

The first function (argument to .hover()) is mouseover and will execute your code. The second argument is mouseout which will unbind the hover event from #yourId. Your code will be executed only once.

1
  • 1
    Wouldn't the $.unbind() by itself like this remove all events from that object? In which case things like your $.click() events would now fail, right? Commented Jan 12, 2014 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.