2010-11-18 5 views
2

J'utilise des événements jQuery comme le survol de la souris et le passage du curseur.Evénement jQuery après le changement de l'arborescence

Lorsqu'un utilisateur déclenche le survol de la souris sur l'élément cible, cet élément reçoit une nouvelle classe (avec removeClass et addClass).

Ensuite, quand la souris sort, le mouseout est déclenché, mais le sélecteur de l'élément ayant l'événement mouseout ne correspond plus, parce que j'ai changé la classe.

Exemple:

$('span.project_unsel').mouseover(function() { 
    $(this).removeClass('project_unsel'); 
    $(this).addClass('project_sel'); 
}); 

Après déclenchement de l'événement ci-dessus, la classe a changé et ce qui suit ne soit pas tiré. Comment puis-je dire à jQuery de "mettre à jour" ou de "lier" encore une fois, comprenez-le?

Merci beaucoup!

+2

Pourquoi ne pas sélectionner par ID (ou du moins pas le nom de la classe que vous modifiez), puis ajouter supprimer la classe? – m4tt1mus

+0

parce qu'il y en a pas mal, et je pense que "id" devrait être unique. – oimoim

+0

mais vous avez raison, je devrais utiliser une classe "vide" pour les sélectionner – oimoim

Répondre

3

Je vous conseille de faire quelque chose comme cela au lieu, à fait des choses moins confus:

$('span.project').hover(function() { 
    $(this).addClass('selected'); 
}, function() { 
    $(this).removeClass('selected'); 
}); 

C'est, lier .hover à des éléments avec la classe .project, et il suffit d'ajouter et de supprimer la classe .selected lorsque le mouseenter (premier argument) et mouseleave (second argument) les événements sont déclenchés.

Jetez un oeil à .hover.

0

Il y a plusieurs façons de résoudre ce problème, mais si vous voulez minimiser vos modifications de code, vous pouvez juste ajouter une autre classe à vos éléments cibles qui ne change pas, puis vous lier à cela.

Si vous ne pouvez pas ajouter une classe supplémentaire pour une raison quelconque, essayez ceci:

$('span.project_sel,span.project_unsel').mouseout(function() { 
    $(this).removeClass('project_sel').addClass('project_unsel'); 
}).mouseover(function() { 
    $(this).removeClass('project_unsel').addClass('project_sel'); 
}); 

Vous pouvez également jeter un oeil à toggleClass() si vous vous sentez ajouter/supprimer est inélégante. Editer: La solution de stationnaire de Karim est meilleure que de le faire via le passage de la souris ou le survol de la souris.

Questions connexes