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

Question

首先，我不希望另一个插件来执行此操作... jQuery 已经具有使用live()方法完成我想要的 99% 的功能。

基本上，我想改变这个：

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

进入这个：

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

所以，我要说的是，当一个元素添加到页面时，我想立即触发一个方法...... jQuery 已经可以做到这一点，因为这就是它添加“点击”的方式，即使在我上面的示例中！

我如何在不添加另一个插件的情况下实现这一点，而只需使用与“live”和“die”方法相同的功能？

Answer 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

Answer 2

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

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

method and the delegate() method are only for event handling. live() 方法和delegate() 方法仅用于事件处理。 你给他们的代码只会响应浏览器事件，不会响应 DOM 操作。

---

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

Answer 3

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

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

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