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突变事件(也见MDN).如果您只想将节点添加到DOM中,请使用该DOMNodeInserted事件.如果您想了解任何DOM更改,请使用catch-all 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变异事件现已弃用,浏览器正逐渐转向变异观察者.目前最明智的策略似乎是使用变异观察者并回归到变异事件.

Answer 2

这是真的，因为新元素没有绑定到回调的事件，它们只是新的新鲜元素。我建议在新创建的元素创建后立即绑定事件（即在 ajax success 函数内）：

    $(".blah").each(function(){
      $.ajax({
          ...
          success: function(data) { 
            $(this).removeClass(".blah");
            // add handlers to new elements with class "button"
            $(this).find('.button').click(function() {  
                     $.ajax({
                          success: function(data) { 
                            $(this).append(data);
                          });
          }
      });
    }