2010-04-07 4 views
1

J'ai un gestionnaire d'événements liés à l'événement en vol stationnaire selon la méthode de .hover, ce qui est inférieur:équivalent .delegate d'une méthode de .hover existant dans jQuery 1.4.2

$(".nav li").hover(function() { 
    $(this).addClass("hover"); 
}, function() { 
    $(this).removeClass("hover"); 
}); 

Il est important de noter, que j'ai besoin des deux fonctions dans le gestionnaire pour assurer la synchronisation. Est-il possible de réécrire la fonction en utilisant .delegate, car ce qui suit ne fonctionne pas?

$(".nav").delegate("li", "hover", function() { 
    $(this).addClass("hover"); 
}, function() { 
    $(this).removeClass("hover"); 
}); 

Rich

Répondre

2

Essayez cette approche:

$(".nav").delegate("li", "hover", function() { 
    $(this).toggleClass("hover"); 
}); 

Cela dépend de ne pas se .nav remplacé par AJAX ou autre bien, puisque c'est où vit le gestionnaire d'événements. Si elle est remplacée, vous devez attacher le délégué sur un ancêtre supérieur qui est pas remplacé.

Également une correction mineure, $(".nav li").hover(function() { n'utilise pas la méthode .live(), ce qui serait: $(".nav li").live('hover', function() {. .hover() lie l'événement directement à l'élément lorsque ce code s'exécute ... tous les éléments futurs ne déclencheraient pas ce code hover, c'est là que .live() et .delegate() diffèrent, ils fonctionnent sur les éléments futurs via bulles.

+0

Très gêné. Aveuglément supposé que j'étais en train de convertir une méthode .live au lieu d'une méthode .hover, les yeux ne se concentrant évidemment pas correctement aujourd'hui. Donc +1 pour ça. En ce qui concerne l'attachement à un parent qui risque d'être remplacé par programme. Je n'avais pas réalisé la restriction et j'ai attaché aux parents qui n'existent pas nécessairement au moment de la liaison sans problème. – kim3er

+0

@ kim3er - Avec votre méthode actuelle, ils doivent exister au moment de la liaison, sinon le sélecteur ne trouverait/ne lierait rien :) Si votre méthode actuelle fonctionne, la méthode de délégué que j'ai posté devrait aussi bien, donner un coup de Je sais si tu as d'autres problèmes. –

+0

Désolé, je faisais référence à la méthode .delegate, pas .hover dans cette dernière phrase. – kim3er

1

Pour ajouter/supprimer une classe La solution de Nick est parfaite car jQuery fournit la méthode toggleClass appropriée.

Si vous avez besoin de déclencher des fonctions plus complexes qui ne sont pas une méthode à bascule correspondante disponible, vous pouvez le faire en testant le type d'événement:

$(".nav").delegate("li", "hover", function (event) { 
if(event.type == "mouseenter"){ 
    $(this).find(".subDiv").slideDown(); 
}else{ 
    $(this).find(".subDiv").slideUp(); 
} 
}); 

Cela fonctionne pour jQuery> = 1.4.3 - pour les anciennes versions, utilisez mouseover au lieu de mouseenter.