javascript - jQuery - 当 DOM 改变时运行一个函数

Question

我一直在使用 livequery到目前为止哪个有效，但它使页面浏览看起来真的很慢。 所以我正在尝试为此寻找替代解决方案。

我附加了一个函数，该函数在具有特定类的元素上运行一些 ajax，例如:

$(".blah").each(function(){
  $.ajax({
      ...
      success: function(data) { 
        $(this).removeClass(".blah");
        // do other stuff
      }
  });
});

现在我有几个事件卡在不同的元素上，可以在 DOM 中附加 html，比如:

$(".button").click(function(){
  $.ajax({
      ...
      success: function(data) { 
        $(this).append(data);
        // here, new elements with ".blah" class could be inserted in the DOM
        // the event above won't be fired...
      }
  });
});

当 DOM 在其他事件中更新时，我如何才能运行上面的第一个 ajax 函数？

更新:

我还找到了这个插件: http://www.thunderguy.com/semicolon/2007/08/14/elementready-jquery-plugin/

您认为这会是更好的解决方案吗？乍一看似乎是这样，因为它允许您设置“轮询”间隔，如果将其设置为 1 秒或其他时间，这可能会降低 CPU 使用率。我现在正在测试它:)

更新 2:

不幸的是，由于某些奇怪的原因，它只适用于元素 ID :(

Answer 1

大多数主流浏览器(遗憾的是 IE <= 8 不支持)支持 DOM mutation events (另见 MDN )。如果您只对添加到 DOM 的节点感兴趣，请使用 DOMNodeInserted 事件。如果您想了解任何 DOM 更改，请使用包罗万象的 DOMSubtreeModified 事件。

例如:

document.addEventListener("DOMNodeInserted", function(evt) {
    alert("Node inserted. Parent of inserted node: " + evt.relatedNode.nodeName);
}, false);

document.body.appendChild( document.createElement("div") );

2012 年 12 月 13 日更新

DOM 突变事件现已弃用，浏览器逐渐转向 mutation observers .目前最明智的策略似乎是使用变异观察者并回退到变异事件。