How do I unbind "hover" in jQuery?
This does not work:
$(this).unbind('hover');
How do I unbind "hover" in jQuery?
This does not work:
$(this).unbind('hover');
$(this).unbind('mouseenter').unbind('mouseleave')
or more succinctly (thanks @Chad Grant):
$(this).unbind('mouseenter mouseleave')
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
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 :"> )
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);
});
});