Les sélecteurs jQuery ignorent les classes qui sont manipulées après le chargement de la page.

Question

J'ai des boutons qui invitent jQuery à supprimer et à remplacer leur classe quand on clique dessus. L'événement jQuery.mouseover que je veux appeler ignore les classes manipulées et n'obéit qu'aux classes du chargement de la page.

Voici un exemple JSFiddle

Détails ci-dessous:

J'ai une rangée de boutons qui, lorsqu'il est enroulé sur appeler une jQuery pour ajouter une classe .highlighted à des objets ailleurs sur la page:

Voici par exemple HTML:

<ul id="portfolioLinks"> 
    <li class="activeButton kittens"><a class="kittens" href="#"></a></li> 
    <li class="activeButton otters"><a class="otters" href="#"></a></li> 
    <li class="depressed donkey"><a class="donkey" href="#"></a></li> 
</ul> 

et le code jQuery correspondant:

var selectedType = '.' + $(this).attr('class'); 


$("li.activeButton a").mouseenter(function() { 

    var selectedType = '.' + $(this).attr('class'); 

    $("div.pageContent div" + selectedType).addClass('highlighted'); 

});  

$("#portfolioLinks a").mouseleave(function() { 

    $("div.pageContent div").removeClass('highlighted'); 

}); 

Cela fonctionne bien sur le contenu statique de la charge de page, mais lorsque je clique sur un bouton je reçois jQuery pour ajouter une classe .depressed à $(this) et donner à tous les autres .activeButton:

$("#portfolioLinks a").click(function() { 


    $("#portfolioLinks li").addClass('activeButton').removeClass('depressed'); 

    $(this).parent().removeClass('activeButton').addClass('depressed'); 

//do some other stuff 

}); 

Cependant, il semble ignorer complètement les classes modifiées et continue de mettre en évidence les divs correspondant à un bouton qui n'a pas la classe .activeButton.

J'ai passé la majeure partie de la nuit dernière et ce matin à essayer de comprendre cela. J'ai essayé toutes sortes de .not s, :not s et if s, et je suis maintenant complètement perdu.

Toute orientation serait extrêmement appréciée.

Answer 1

Utilisez .delegate() ici au lieu, comme ceci:

$("#portfolioLinks").delegate("li.activeButton a", { 
    mouseenter: function() { 
    var selectedType = '.' + $(this).attr('class'); 
    $("div.pageContent div" + selectedType).addClass('highlighted'); 
    }, 
    mouseleave: function() { 
    $("div.pageContent div").removeClass('highlighted'); 
    }); 

Here's your fiddle updated with the above code, working.

Le problème est que lorsque vous faites $("li.activeButton a") vous n'êtes pas lier quoi que ce soit à la classe , vous êtes événements de liaison aux éléments que vous avez trouvé avec la classe quand il a été exécuté ... le Les éléments sont désormais liés aux gestionnaires d'événements. Tout changement dans le futur n'est pas pertinent, les gestionnaires sont liés.

Avec .live() et .delegate() cependant, le sélecteur est cochée lorsque l'événement se produit, il importe-t que la classe a changé. En prime, il est également moins cher pour de nombreux éléments, puisqu'il y a un ensemble de gestionnaires sur #portfolioLinks.

---

Si vous utilisez jQuery plus que 1.4.3, vous aurez besoin de la forme non-carte, comme ceci:

$("#portfolioLinks").delegate("li.activeButton a", "mouseenter", function() { 
    var selectedType = '.' + $(this).attr('class'); 
    $("div.pageContent div" + selectedType).addClass('highlighted'); 
}).delegate("li.activeButton a", "mouseleave", function() { 
    $("div.pageContent div").removeClass('highlighted'); 
});