使用addClass时，Jquery类选择器不会触发

Question

以下代码将一个类添加到名为“shift”的DIV中。

$('.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

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

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

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