使用 jQuery，如何使用“实时”方法在添加新元素时发出警报？答案

【问题标题】：With jQuery, how can I use the "live" method to alert when a new element is added?使用 jQuery，如何使用“实时”方法在添加新元素时发出警报？
【发布时间】：2011-09-27 17:06:09
【问题描述】：

首先，我不想让另一个插件来做这件事……jQuery 已经具备使用 live() 方法完成我想要的 99% 的功能。

基本上，我想改变这个：

$(".some-button").live("click", function() { alert('yay!'); });

进入这个：

$(".some-button").live(function() { alert('yay!'); });

所以，我的意思是，当一个元素被添加到页面时，我想立即触发一个方法...... jQuery 已经可以做到这一点，非常接近，因为它就是这样添加的即使在我上面的示例中，“点击”也是如此！

如何在不添加其他插件的情况下实现此目的，而只需使用与“live”和“die”方法相同的功能？

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/815074/…

标签： javascript jquery dom-manipulation

【解决方案1】：

这是我复制和粘贴的一些代码，似乎可以在小提琴中使用，至少在 FF 上是这样：http://jsfiddle.net/KQBzn/

$(document).bind('DOMNodeInserted', function(event) {
      alert('inserted ' + event.target.nodeName + // new node
            ' in ' + event.relatedNode.nodeName); // parent
});

来源：http://forum.jquery.com/topic/how-to-get-notified-when-new-dom-elements-are-added

【讨论】：

太棒了！可惜这在 IE8 或更低版本中不起作用。

【解决方案2】：

没有任何跨浏览器的方法可以做到这一点，而且 jQuery 本身也没有允许这样做。

您必须使用插件，或者只是手动管理新元素的调用代码。

live()^[docs] 方法和delegate()^[docs] 方法仅用于事件处理。你给他们的代码只会响应浏览器事件，不会响应 DOM 操作。

.live() 不会这样做的原因是它在向 DOM 添加新元素时不会运行任何代码。它不监视任何 DOM 更改。而是响应冒泡到document 的事件，并在它与您提供的选择器匹配时调用处理程序。

【讨论】：

啊，现在我明白了……“live”不是在添加后向对象添加点击事件处理程序……而是向页面添加“点击”，并且然后当有问题的元素与条件匹配时，它也会调用该元素！
@Timothy：没错。这是对.live() 的常见误解。这只是整个文档的事件委托。这就是为什么我更喜欢使用.delegate() 的原因，它完全一样，但是可以让代理比整个文档更专注。

【解决方案3】：

你不能用 .live() 方法来做到这一点。

似乎 jQuery 应该为 .live() 方法添加一个特性，这样如果它与一个特定的关键字（如“created”而不是事件名称）一起使用，那么它会让你为创建的元素执行一个函数。那会很酷！例如，理想的场景是这样的：

$('.foobar').live('created', function() {
    // do something with each newly created .foobar element here.
});

【讨论】：