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

Posted

技术标签:

【中文标题】jQuery 选择器不适用于添加的类【英文标题】:jQuery selectors not working with added class 【发布时间】: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://***.com/a/12202186/2842292 尝试过,但不幸的是无法在我的示例中使用它。

提前致谢!

【问题讨论】:

当问题是关于 jQuery 时,看不到为什么这个问题被标记为 PHP。已删除。 【参考方案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");
    
);

【讨论】:

以上是关于jQuery 选择器不适用于添加的类的主要内容,如果未能解决你的问题,请参考以下文章

Jquery 不适用于两个 :not 选择器?

jQuery 属性等于选择器不适用于自定义属性

jquery 属性选择器不适用于数据属性

为啥 jQuery 选择器适用于 Chrome,但不适用于 Safari?

字符串上的 jQuery 选择器不适用于 Internet Explorer

Jquery 选择器不适用于动态 .get 加载的内容