jquery - 使用 addClass 时未触发 Jquery 类选择器

Question

以下代码向 DIV 添加了一个名为“shift”的类。

$('.adminopen').click(function(){
        $('.backoffice').addClass('open');
        $('.maincontent').addClass('shift')
        return false
    });

一旦添加了此类，为什么还包含在初始文档准备部分中的下一个脚本不会触发。

$('.shift').click(function(){
        $('.backoffice').removeClass('open');
        $('.maincontent').removeClass('shift');
    });

Answer 1

因为您只绑定到初始元素。将委托与on一起使用：

$(document.body).on('click', '.shift', function(){

Answer 2

这是因为当您将事件绑定到 shift 时，DOM 中不存在 shift

您需要使用事件委托 -

$(document).on('click','.shift',function(){
        $('.backoffice').removeClass('open');
        $('.maincontent').removeClass('shift');
});

Answer 3

使用上面建议的事件委托，或者在分配类时正确绑定事件句柄。

function bindShift() {
    $('.shift').click(function () {
        $('.backoffice').removeClass('open');
        $('.maincontent').removeClass('shift');
    });
}

$('.adminopen').click(function () {
    $('.backoffice').addClass('open');
    $('.maincontent').addClass('shift');
    bindShift();
    return false
});