JQuery：将类添加到元素 – 不能将此类用于选择器？

我有以下问题：为了在不同的情况下标记一个元素，我想在元素中添加一个类：

jQuery('#menu-item-41 a').addClass('newsbox-closed1'); 

后来我想点击这个类的元素时做一些有趣的工作人员 – 到目前为止它工作正常：

 jQuery('.newsbox-closed1').click(function(){ jQuery('#newsbox').css('display', 'block'); jQuery(this).css('background-color', '#FF33AB').removeClass('newsbox-closed1').addClass('news-open'); }); 

到现在为止一切都很好。 该元素获得“新闻打开”类，并出现新闻框。 但是以下内容不再适用：

 jQuery('.news-open').click(function(){ alert('JUCVJU'); jQuery(this).removeClass('news-open').addClass('newsbox-closed2'); jQuery('#newsbox').css('display', 'none'); }); 

想法：当有人再次点击同一个链接时，新闻框应该消失，链接将获得一个新类。 这不起作用 – 不删除“new-open”类，不显示alertbox，什么也没有。 此外，以下工作还有一半 – 它是新闻箱上的关闭按钮：

 jQuery('#close').click(function(){ jQuery('#newsbox').css('display', 'none'); jQuery('.news-open').removeClass('news-offen').addClass('newsbox-closed2') }); 

id为“newsbox”的元素消失，但第二部分无效。 这个元素的类仍然存在。 我没有收到任何错误消息，没有…有没有人知道是什么原因引起的？

最好的，托比亚斯

Answer 1

您正在运行时添加类。 更改

 jQuery('.news-open').click(function(){ 

至

 jQuery('.news-open').on('click',(function(){ 

以上是JQuery> = 1.7

对于JQuery <1.7，请使用

 jQuery('.news-open').live('click',function(){ 

JQuery中的生活和工作也适用于在运行时创建的元素。

Answer 2

您可能需要委托您的事件处理程序，因为您在文档加载后更改了类。 尝试更换

 jQuery('.news-open').click(function(){ 

同

 jQuery(document).on('click', '.news-open', function(){ 

但是，如果你能比document更具体，那么你应该这样做。 将您的活动委托给最近的.news-open容器，以获得最佳效率。

http://api.jquery.com/on/

Answer 3

感谢你们！！！

为了让其他人面临类似的问题，我的工作代码看起来如下：

 jQuery('#menu-item-41').on('click', '.news-open', (function(){ alert('JUCVJU'); jQuery(this).removeClass('news-open').addClass('newsbox-closed2'); jQuery('#newsbox').css('display', 'none'); })); 

id“menu-item-41”是容器的id，它以“news-open”类围绕我的元素。 现在，当我再次点击进一步重新分类的元素并且新闻框消失时，我会收到警报框。

Answer 4

非常相似的问题：点击一个链接，我做一个动画来显示一个隐藏的div，并将'.hideMe'类添加到布局的其余部分，以便在显示的div之外的任何地方点击将再次隐藏它。 jQuery无法选择'.hideMe' ，因为它不会出现在页面加载中。 通过将两个.on()方法与委托链接在一起解决，如下所示： https ： .on()

 $(document.body).on('click', '#link', function() { $('div').addClass('.hideMe').animate(); // animation code here $('#newdiv').show(); }).on('click', '.hideme', function() { $('div').removeClass('.hideMe').animate(); // animation code here $('#newdiv').hide(); }); 

这是jQuery 1.10.x.