Javascript jQuery-在DOM更改时运行函数

到目前为止，我一直在使用它，但它使页面浏览看起来非常慢。 因此，我正试图找到另一种解决方案

我附加了一个函数，该函数在具有特定类的元素上运行一些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函数运行

更新：

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback();
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }
        else if( eventListenerSupported ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

observeDOM( $('#dom_element')[0] ,function(){ 
    console.log('dom changed');
});

我还发现了这个插件：

你认为这是一个更好的解决方案吗？从一个快速看，它似乎是，因为它允许您设置一个“轮询”间隔，如果您将它设置为1秒或其他时间，可能会减少cpu使用。我现在正在测试：）

更新2:

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback();
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }
        else if( eventListenerSupported ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

observeDOM( $('#dom_element')[0] ,function(){ 
    console.log('dom changed');
});

---

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

我也遇到过类似的问题。没有真正的方法在dom更改上运行某些东西（据我所知）。我通过两种不同的方法实现了这一点

设置每秒调用函数的setTimeout，或者在用户移动鼠标时触发函数。如果处理不当，这两种情况都会导致速度减慢

在ajax完成时调用一个函数。因此，只要在每次完成查询时都在success部分调用doAjax（）

您还可以将第一个ajax查询绑定到body标记上，这样，每当用户单击某个内容时，ajax事件都会触发，然后检查是否满足正确的条件

---

编辑：这可能会起作用。添加$（“BODY ID/CLASS”）.change（function（）{}）；不完全确定，因为我不是jQuery中最流利的。

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

---

大多数主要浏览器（但不幸的是不是IEIE9+、FF和Chrome:

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver,
        eventListenerSupported = window.addEventListener;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                if( mutations[0].addedNodes.length || mutations[0].removedNodes.length )
                    callback();
            });
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true });
        }
        else if( eventListenerSupported ){
            obj.addEventListener('DOMNodeInserted', callback, false);
            obj.addEventListener('DOMNodeRemoved', callback, false);
        }
    }
})();

observeDOM( $('#dom_element')[0] ,function(){ 
    console.log('dom changed');
});