Срабатывает функция удалённого класса, при этом не работает функция добавленного класса?

Question

[Ксения]

Всем привет!

Проблема такая :
у меня есть элемент
<li> с классом .active,
при клике на него происходит удаление текущего класса и добавление нового + функция slideDown

$(".active").click(function(){
      console.log('active'); - проверяю, захожу ли я в эту функцию -да, всё ок
      $(".disactive").slideDown("slow");
      $(".active").addClass("slideup");
      $(".active").removeClass("active");
    });

смотрю html - всё так и происходит, класс active удаляется, появляется slideup.

Далее пишу следующее :

$(".slideup").click(function(){
      console.log('slide'); - проверяю, захожу ли я в эту функцию -НЕТ, при клике на данный элемент выводится консоль из первого куска кода, а именно console.log('active');
      $(".disactive").slideUp("slow");
      $(".active").addClass("active");
      $(".active").removeClass("slideup");
    });

что самое интересное, так то, что данный код срабатывает,

$(".disactive").click(function(){
      console.log('disactive');
      $(".slideup a").html($(this).text());
      $(".disactive").slideUp("slow");
    });

хотя прописан всё тот же класс slideup, подставляю класс active - не работает.

В общем, получается какая-то путаница. Что мне необходимо? Мне необходимо, чтобы срабатывал данный кусок кода :

$(".slideup").click(function(){
      console.log('slide');
      $(".disactive").slideUp("slow");
      $(".active").addClass("active");
      $(".active").removeClass("slideup");
    });

Answer 1

[Cage]

Это потому что у вас не совсем корректное представление о привязке обработчиков событий к DOM
элементам
конструкция которую вы используете:

$(".active").click(function(){
...
});

отрабатывает один раз и только для тех элементов которые в момент загрузки страницы имели класс "active"
Попробуйте все конструкции поменять на следующие:

$("body").on('click','li.active',function(){
 ...   
})