Come faccio a svincolare "hover" in jQuery?

Come faccio a svincolare "hover" in jQuery?

Questo non funziona:

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

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

o più succintamente (grazie @Chad Grant ):

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

In realtà, la documentazione di jQuery ha un approccio più semplice rispetto agli esempi concatenati mostrati sopra (anche se funzioneranno perfettamente):

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

A partire da jQuery 1.7, puoi anche usare $.on()e $.off()per l'associazione di eventi, quindi per svincolare l'evento hover, dovresti usare il più semplice e ordinato:

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

Lo pseudo-nome-evento "hover" è usato come abbreviazione di "mouseenter mouseleave" ma era gestito in modo diverso nelle versioni precedenti di jQuery; richiedendo di rimuovere espressamente ciascuno dei nomi degli eventi letterali. Usando $.off()ora puoi rilasciare entrambi gli eventi del mouse usando la stessa scorciatoia.

Modifica 2016:

Ancora una domanda popolare, quindi vale la pena attirare l'attenzione sul punto di @ Dennis98 nei commenti seguenti che in jQuery 1.9+, l'evento "hover" è stato deprecato a favore delle chiamate standard "mouseenter mouseleave". Quindi la tua dichiarazione di associazione di eventi dovrebbe ora assomigliare a questo:

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

Scollega gli eventi mouseentere mouseleaveindividualmente o svincola tutti gli eventi sugli elementi.

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

o

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

unbind () non funziona con eventi inline hardcoded.

Quindi, ad esempio, se vuoi svincolare l'evento mouseover da <div id="some_div" onmouseover="do_something();">, ho scoperto che $('#some_div').attr('onmouseover','')è un modo rapido e sporco per ottenerlo.

Un'altra soluzione è .die () per gli eventi collegati a .live () .

Ex.:

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

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

Puoi trovare un buon riferimento qui: Exploring jQuery .live () e .die ()

(Scusa per il mio inglese: ">)

Tutto ciò che viene fatto al passaggio del mouse dietro le quinte è vincolante per la proprietà mouseover e mouseout. Legherei e svincolerei le vostre funzioni da quegli eventi individualmente.

Ad esempio, supponi di avere il seguente html:

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

allora il tuo jQuery sarebbe:

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

});

È possibile rimuovere un gestore di eventi specifico collegato da on, utilizzandooff

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

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

Usando questo, rimuoverai solo handlerFunction.
Un'altra buona pratica è impostare uno spazio dei nomi per più eventi allegati

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

Ho scoperto che funziona come secondo argomento (funzione) per .hover ()

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

La prima funzione (argomento di .hover ()) è il passaggio del mouse e eseguirà il codice. Il secondo argomento è mouseout che svincolerà l'evento hover da #yourId. Il tuo codice verrà eseguito solo una volta.