关于更改不拾起新的DOM元素

在论坛上，我已经实现了一个“扰流标签”它工作正常，除了一点点。当人们使用快速回复，或编辑帖子利用AJAX和JS动态添加帖子时，该功能不会拾取新添加/编辑的扰流标签。我在这里尝试了一些方法来解决这个问题，但目前没有任何方法可行。我没有正确使用on()功能吗？关于更改不拾起新的DOM元素

http://jsfiddle.net/WASasquatch/ho5ewoj2/

更新与它下面的帮助似乎捕捉到了新的元素，而是功能的第二次点击后，不再向上滑动。

功能

$(document).on('click', '.spoilertagbutton', function() { 

     var spoilerButton = $(this), 
      parentSpoiler = $(this).parent().closest('.spoilertag'), 
      spoilerContent = parentSpoiler.find('.spoilercontent'), 
      spoilerHidden = true; 

     spoilerButton.css('backgroundColor', 'rgba(255,255,255,0.2)'); 
     spoilerButton.mouseleave(function(){ 
       spoilerButton.css('backgroundColor', 'rgba(0,0,0,0.4)'); 
     }); 

     if (spoilerHidden) { 
      spoilerButton.html('Hide Content'); 
      spoilerContent.slideDown(function() { 
       $(this).children().slideDown(); 
      }); 
      spoilerHidden = false; 
     } else { 
      spoilerButton.html('Show Content'); 
      spoilerContent.slideUp(function() { 
       $(this).children().slideUp(); 
      }); 
      spoilerHidden = true; 
     } 

    });

来源

2014-10-11 WAS

这不起作用，因为事件只能被添加到实际上是在DOM元素。如果动态添加元素，则必须从静态父元素中委派事件，例如，像这样：

$(document).on("click", ".spoilertagbutton", function() 
    { 
    // your function 
    } 
);

静态父元素将委托事件与类spoilertagbutton所有的孩子，即使后来添加的。

因为它应该避免复制/粘贴到Stackoverflow（即使从自己的答案） - 我已经回答了类似的问题here与一些进一步的信息和事件委托jQuery的参考。

来源

2014-10-11 17:23:33

似乎找到它们，但不再滑落。查看更新代码。 – WAS 2014-10-11 17:48:48

@ user3701746您是否拥有小提琴，因为它更容易检查实际的html/js是怎么回事？只看代码，我会认为问题在于你设置了spoilerHidden = true;每次单击spoilertagbutton时，它都不会滑动。所以你应该尝试一下，如果它在点击函数外面声明spoilerHidden变量为全局变量，它可以解决它。 – 2014-10-11 17:55:57

添加了小提琴，对不起。 – WAS 2014-10-11 18:06:23

关于更改不拾起新的DOM元素

回答

相关问题