class 更改后事件未触发

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

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

在更新 class 时，您需要使用 Event Delegation using .on() 委托事件方法。

即

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

例子

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

代替document你应该使用最近的静态容器。

不过，我建议您使用常见的 class，只需切换 submenu_plus 和 submenu_minus class。如果你想检查元素是否有 class，你可以使用 .hasClass()

HTML

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

jQuery

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

class 更改后事件未触发

Event is not triggering after class change

jquery

event-handling