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

Posted 2023-05-09

【中文标题】使用 addClass 时未触发 Jquery 类选择器

【英文标题】：Jquery class selector not triggering when a addClass has been used

【发布时间】：2013-06-20 03:01:33

【问题描述】：

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

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

一旦添加了这个类，为什么下一个脚本也包含在初始文档准备部分中没有触发。

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

【参考方案1】：

因为您只绑定到初始元素。使用on 的委托：

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

【参考方案2】：

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

你需要使用事件委托 -

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

【参考方案3】：

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

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


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