Question

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

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

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

它将类.inactive添加到两个div对象中，这两个div对象位于彼此内部。这个功能的其余部分留在这里，以保持简短。问题是，当应用.inactive的相应样式时，我仍然可以反复点击该框，并且将一次又一次地调用该函数（尽管我添加了.not（）选择器）这导致了这个购物车中的特定物品多次 - 这是我想要防止的。如果我手动重新加载页面，一切都很好，这个

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

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

JSFiddle

我在这里试过https://stackoverflow.com/a/12202186/2842292，但不幸的是，在我的例子中无法让它发挥作用。

提前致谢！

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选择器不使用添加的类

2 个答案: