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中实际存在的元素中。如果动态添加元素，则必须从静态父元素委托事件，例如，像这样：

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

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

因为应该避免在Stackoverflow上复制/粘贴（即使是从一个人自己的答案） - 我已经回答了类似的问题here，其中包含一些有关事件委派的更多信息和jquery参考。

改变没有采取新的dom元素

1 个答案: