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委托事件方法{。}}。

即

$(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');
});

课程改变后，事件不会触发

1 个答案: