javascript - jQuery 选择器不适用于添加的类

Question

我正在开发 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但不幸的是无法让它在我的示例中工作。

提前致谢!

Answer 1

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

1. 单击时取消注册事件监听器。您可以将其添加到事件监听器中: $(this).unbind();,

2. 您在监听器的最顶部添加额外的检查:if($(this).hasClass("inactive")) return;

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