javascript - 更改时未获取新的 dom 元素

Question

在一个论坛上，我实现了一个“剧透标签”，它工作得很好，除了一点点。当人们使用快速回复或利用 AJAX 和 JS 编辑帖子来动态添加帖子时，该功能不会获取新添加/编辑的剧透标签。我在这里尝试了一些方法来解决这个问题，但到目前为止似乎都不起作用。我是否没有正确使用 on() 函数？

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;
        }

    });

Answer 1

这不起作用，因为事件只能添加到实际位于 DOM 中的元素。如果动态添加元素，则必须从静态父元素委托(delegate)事件，例如像这样:

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

静态父元素会将事件委托(delegate)给具有 spoilertagbutton 类的所有子元素，即使稍后添加也是如此。

因为应该避免在 Stackoverflow 上复制/粘贴(即使是自己的答案) - 我已经回答过类似的问题 here以及事件委托(delegate)的一些进一步信息和 jquery 引用。