jQuery 选择器不适用于添加的 class

Question

我正在 php/jQuery 商店工作，运行遇到以下问题：我有几个 div 个盒子作为文章，一旦点击一个盒子，它就会被移到购物车中，因此必须变为非活动状态。

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

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

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

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

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

JSFiddle

我已经在此处尝试过但不幸的是无法在我的示例中使用它。

提前致谢！

Answer 1

您可以通过两种方式完成：

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

然后即使它运行了，它也会退出，不会完成这项工作。

Answer 2

事件绑定发生在页面加载时，因此您应该在函数中构建逻辑：

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

jQuery 选择器不适用于添加的 class

jQuery selectors not working with added class

javascript

jquery

html

jquery-ui

jquery-selectors