Событие не запускается после изменения класса

Question

У меня есть <span>, который меняет его class, когда я нажимаю на него и наоборот.

HTML

<span class="submenu_plus"></span> 

JQuery

$('.submenu_plus').on('click', function() { 
    console.log('plus'); 

    // some not important code 

    $(this).removeClass('submenu_plus').addClass('submenu_minus'); 
}); 

$('.submenu_minus').on('click', function() { 
    console.log('minus'); 

    // some not important code 

    $(this).removeClass('submenu_minus').addClass('submenu_plus'); 
}); 

Моя проблема в том, что только первое событие по-прежнему вызывая, когда я нажав на что span. В чем проблема?

Answer 1

Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код делает привязку к событию.

Поскольку вы обновляете класс, вам необходимо использовать Event Delegation, используя подход .on() делегированных событий.

т.е.

$(document).on('event','selector',callback_function) 

Пример

$(document).on('click', ".submenu_minus", function(){ 
    //Your code 
}); 

На месте document вы должны использовать ближайший статический контейнер.

---

Однако я бы рекомендовал вам использовать общий класс просто переключать эти submenu_plus и submenu_minus класс. Если вы хотите, чтобы проверить элемент имеет класс, вы можете использовать .hasClass()

HTML

<span class="submenu submenu_plus"></span> 

JQuery

$('.submenu').on('click', function() { 
    $(this).toggleClass('submenu_plus submenu_minus'); 
});