Как повесить событие на новосозданный класс?

Question

[Юрий Янин]

Суть такова. Есть элемент с классом скажем "first_class" c помощью события $(".first_class").click и функции .addclass я добавляю к нему класс "second_class" и удаляю существующий "first_class". Но событие $(".second_class").click не срабатывает. Я так понимаю Dom это из-за того, что он реагирует только на изначально созданное Dom дерево при загрузке страницы. Как решить данную проблему?

Answer 1

[Евгений]

Можете делегировать события, тогда при клике на документ будет проверяться селектор по которому был клик, на jQuery выглядит как-то так:

$(document).on('click', '.second_class', function () {
    //...
});

Comments

[Юрий Янин]

Близко конечно. Но в итоге мне это не помогло. Пока что такой костыль сделал.

tooglecloss = function(e) {
                $(".mobile-navigation").animate({
                "width" : "0%" 
            } , 1500 , function(){
                $(".mobile-navigation").css("display","none");
                $(".cmn-toggle-switch").removeClass("active").addClass('not_active');
            });
    };
    
    
    $('.not_active').on('click', function(e) {
        if($(this).hasClass('not_active')) {
                $(".mobile-navigation").animate({
                "width" : "40%" 
            } , 1500 ); 
                $(".cmn-toggle-switch").removeClass("not_active").addClass("active");
                $(".mobile-navigation").css("display", "block");
                $(".active").on('click', tooglecloss );
        }
        else {
            $(".active").off('click', tooglecloss );
        }
    });

Answer 2

[profesor08]

Вы добавляете элементу новый класс, но не вешаете, на этот элемент, новое событие. Во вторых, если элемент не пересоздается в DOM, то надо переопределить элементу новое собитие по клику.

$(".first_class").click(function() {
  $(this).addClass('second_class');
  $(this).removeClass('first_class');
  $(this).click(function() {
     // do smth
  });
});