Селекторы jQuery игнорируют классы, которыми манипулируют после загрузки страницы

Question

У меня есть несколько кнопок, которые при нажатии вызывают jQuery для удаления и замены их класса.Событие jQuery.mouseover, которое я хочу вызвать, игнорирует манипулируемые классы и подчиняется только классам из загрузки страницы.

Вот пример JSFiddle

Подробности ниже:

У меня есть ряд кнопок, которые при наведении вызывают некоторый jQuery для добавления класса .highlighted к объектам в другом месте на странице:

Вот пример 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>

и соответствующий код jQuery:

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');

});

Это прекрасно работает со статическим содержимым при загрузке страницы, но когда я нажимаю кнопку, я получаю jQuery для добавления класса .depressed к $(this) и передайте все остальные .activeButton:

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


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

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

//do some other stuff

}); 

Однако, похоже, он полностью игнорирует измененные классы и продолжает выделять элементы div, соответствующие кнопке, в которой отсутствует класс .activeButton.

Я провел большую часть прошлой ночи и этим утром, пытаясь понять это.Я испробовал все варианты .not с, :not с и if с, и теперь я полностью потерян.

Любое руководство будет чрезвычайно ценно.

Answer 1

Вместо этого используйте .delegate() вот так:

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

Вот ваша скрипка, обновленная с помощью приведенного выше кода, работает .

Проблема в том, что когда вы делаете $("li.activeButton a"), вы ничего не привязываете к классу , вы привязываете события к найденным элементам с помощью класса когда он был запущен ... элементы теперь имеют привязанные обработчики событий. Любые изменения в будущем не имеют значения, обработчики связаны.

С .live() и .delegate() однако селектор проверяется , когда событие происходит , поэтому имеет значение что класс изменился. В качестве бонуса, это также дешевле для многих элементов, поскольку есть один набор обработчиков на #portfolioLinks.

---

Если вы используете jQuery старше 1.4.3, вам потребуется форма, не относящаяся к карте, например:

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