jQuery 选择器不适用于添加的类答案

【问题标题】：jQuery selectors not working with added classjQuery 选择器不适用于添加的类
【发布时间】：2015-03-15 15:34:05
【问题描述】：

我正在开发一个 php/jQuery 商店并遇到了以下问题：我有几个 div 框作为文章，只要单击一个框，它就会被移入购物车，因此必须变为非活动状态。

到目前为止，这是我的代码：

 $( ".artbox" ).not( ".inactive" ).on('click', function(){      
    $(this).addClass("inactive");
    $(this).find("#artbox").addClass("inactive")
})

它将类 .inactive 添加到两个 div 对象中，这两个对象位于彼此内部。为了简短起见，这里省略了这个函数的其余部分。问题是，虽然应用了 .inactive 的相应样式，但我仍然可以一次又一次地单击该框，并且将一次又一次调用该函数（尽管我添加了 .not() 选择器），这导致了这个购物车中的特定文章多次 - 这是我想要阻止的。如果我手动重新加载页面，一切都很好，这

$( ".artbox.inactive" ).on('click', function(){
        $(this).effect( "shake", {distance:1});
})

也有效（它不适用于未重新加载而添加的项目）。但我正在寻找一种无需重新加载即可工作的解决方案，因为在将商品添加到购物车后，我会显示一个带有成功消息的弹出窗口。

JSFiddle

我在这里https://stackoverflow.com/a/12202186/2842292 尝试过，但不幸的是无法在我的示例中使用它。

提前致谢！

【问题讨论】：

当问题是关于 jQuery 时，看不到为什么这个问题被标记为 PHP。已删除。

标签： javascript jquery html jquery-ui jquery-selectors

【解决方案1】：

您可以通过两种方式做到这一点：

您在单击时取消注册事件侦听器。您可以将其添加到事件侦听器中：$(this).unbind();,
您在侦听器的最顶部添加一个额外的检查： if($(this).hasClass("inactive")) return;

如果它甚至运行，它会退出并且不会完成工作。

【讨论】：

【解决方案2】：

事件绑定发生在页面加载时，所以你应该在函数中构建逻辑：

$( ".artbox" ).on('click', function() {
    if ($(this).hasClass("inactive")) {
        $(this).effect( "shake", {distance:1});
    } else {
        $(this).addClass("inactive");
        $(this).find("#artbox").addClass("inactive");
    }
});

【讨论】：