Question

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

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(document).on('click', '.news-open', function(){

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

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

Answer 2

您正在运行时添加类。变化

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

到

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

上面是JQuery＆gt; = 1.7

对于JQuery＆lt; 1.7，请使用

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

在JQuery中实时运行，也适用于在运行时创建的元素。

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”是包含“news-open”类的元素周围的容器的id。现在，当我再次点击进一步重新分类的元素并且新闻框消失时，我会收到警告框。

Answer 4

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

$(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。

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

4 个答案: