类更改后未触发事件

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

事件处理程序仅绑定到当前选定的元素；在代码进行事件绑定调用时，它们必须存在于页面上。

当您更新类时，您需要使用.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');
});