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 选择器适用于 Chrome,但不适用于 Safari?