¿Cómo puedo desvincular "hover" en jQuery?

¿Cómo puedo desvincular "hover" en jQuery?

Esto no funciona:

$(this).unbind('hover');

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

o más sucintamente (gracias @Chad Grant ):

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

En realidad, la documentación de jQuery tiene un enfoque más simple que los ejemplos encadenados que se muestran arriba (aunque funcionarán bien):

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

A partir de jQuery 1.7, también puede usar $.on()y $.off()para el enlace de eventos, por lo que para desvincular el evento de desplazamiento, usaría el más simple y ordenado:

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

El pseudo-nombre-evento "hover" se usa como una abreviatura de "mouseenter mouseleave" pero se manejaba de manera diferente en versiones anteriores de jQuery; requiriéndole que elimine expresamente cada uno de los nombres de eventos literales. Usar $.off()ahora le permite eliminar ambos eventos del mouse usando la misma abreviatura.

Editar 2016:

Sigue siendo una pregunta popular, por lo que vale la pena llamar la atención sobre el punto de @ Dennis98 en los comentarios a continuación de que en jQuery 1.9+, el evento "hover" se desaprobó en favor de las llamadas estándar "mouseenter mouseleave". Entonces, su declaración de vinculación de eventos ahora debería verse así:

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

Desvincular los eventos mouseentery mouseleaveindividualmente o desvincular todos los eventos en los elementos.

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

o

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

unbind () no funciona con eventos en línea codificados.

Entonces, por ejemplo, si desea desvincular el evento mouseover <div id="some_div" onmouseover="do_something();">, descubrí que $('#some_div').attr('onmouseover','')es una forma rápida y sucia de lograrlo.

Otra solución es .die () para eventos que se adjuntan con .live () .

Ex.:

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

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

Puede encontrar una buena referencia aquí: Explorando jQuery .live () y .die ()

(Perdón por mi inglés: ">)

Todo lo que hace el hover detrás de escena es vinculante a la propiedad mouseover y mouseout. Vincularía y desvincularía sus funciones de esos eventos individualmente.

Por ejemplo, digamos que tiene el siguiente html:

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

entonces tu jQuery sería:

$(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);
  });

});

Puede eliminar un controlador de eventos específico que se adjuntó mediante on, utilizandooff

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

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

Con esto, eliminará solo handlerFunction.
Otra buena práctica es establecer un espacio de nombres para múltiples eventos adjuntos

$("#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");

Encontré que esto funciona como segundo argumento (función) para .hover ()

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

La primera función (argumento para .hover ()) es el mouseover y ejecutará su código. El segundo argumento es mouseout, que desvinculará el evento de desplazamiento de #yourId. Su código se ejecutará solo una vez.