Comment dissocier le «survol» dans jQuery?

Comment dissocier le "survol" dans jQuery?

Cela ne fonctionne pas:

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

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

ou plus succinctement (merci @Chad Grant ):

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

En fait, la documentation jQuery a une approche plus simple que les exemples en chaîne montrés ci-dessus (bien qu'ils fonctionnent très bien):

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

À partir de jQuery 1.7, vous pouvez également utiliser $.on()et $.off()pour la liaison d'événement, donc pour dissocier l'événement de survol, vous utiliseriez le plus simple et le plus ordonné:

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

Le pseudo-nom d'événement "hover" est utilisé comme raccourci pour "mouseenter mouseleave" mais était géré différemment dans les versions précédentes de jQuery; vous obligeant à supprimer expressément chacun des noms d'événements littéraux. Utiliser $.off()maintenant vous permet de supprimer les deux événements de souris en utilisant le même raccourci.

Modifier 2016:

Encore une question populaire, il vaut donc la peine d'attirer l'attention sur le point de @ Dennis98 dans les commentaires ci-dessous que dans jQuery 1.9+, l'événement "hover" était obsolète au profit des appels standard "mouseenter mouseleave". Ainsi, votre déclaration de liaison d'événement devrait maintenant ressembler à ceci:

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

Dissociez les événements mouseenteret mouseleaveindividuellement ou dissociez tous les événements sur le ou les éléments.

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

ou

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

unbind () ne fonctionne pas avec les événements en ligne codés en dur.

Ainsi, par exemple, si vous souhaitez dissocier l'événement mouseover <div id="some_div" onmouseover="do_something();">, j'ai trouvé que $('#some_div').attr('onmouseover','')c'était un moyen rapide et sale de le réaliser.

Une autre solution est .die () pour les événements qui se sont attachés avec .live () .

Ex.:

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

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

Vous pouvez trouver une bonne référence ici: Exploration de jQuery .live () et .die ()

(Désolé pour mon anglais: ">)

Tout ce que fait le survol dans les coulisses est lié à la propriété mouseover et mouseout. Je lierais et délierais vos fonctions de ces événements individuellement.

Par exemple, disons que vous avez le code HTML suivant:

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

alors votre jQuery serait:

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

});

Vous pouvez supprimer un gestionnaire d'événements spécifique qui était attaché par on, en utilisantoff

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

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

En utilisant cela, vous ne supprimerez que handlerFunction
Une autre bonne pratique consiste à définir un namespace pour plusieurs événements attachés

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

J'ai trouvé que cela fonctionne comme deuxième argument (fonction) de .hover ()

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

La première fonction (argument de .hover ()) est un survol de la souris et exécutera votre code. Le deuxième argument est mouseout qui dissociera l'événement de survol de #yourId. Votre code ne sera exécuté qu'une seule fois.