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

【问题标题】：Jquery class selector not triggering when a addClass has been used使用 addClass 时未触发 Jquery 类选择器
【发布时间】：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');
    });

【问题讨论】：

标签： jquery class jquery-selectors

【解决方案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
});

【讨论】：