DOM-Mutation-event in JQuery oder Javascript Vanille

Dies ist sicherlich ein hack, aber warum nicht patch das zugrunde liegende DOM-Methoden zum einfügen von Knoten? Es gibt ein paar Möglichkeiten, dies zu tun:

Eine. Sie wissen, was bestimmten element wird angefügt:

var c = document.getElementById('#container');
c.__appendChild = c.appendChild;
c.appendChild = function(){
     alert('new item added');
     c.__appendChild.apply(c, arguments); 
}

fiddle-demo für Ein

B. Sie wissen, was Typ element wird angefügt:

HTMLDivElement.prototype.__appendChild = HTMLDivElement.prototype.appendChild;
HTMLDivElement.prototype.appendChild = function(){
    alert('new item added');
    HTMLDivElement.prototype.__appendChild(this,arguments); 
}

fiddle-demo für B

(Beachten Sie, dass die Lösung B nicht unterstützt IE < 8 oder einen anderen browser, der keine Unterstützung für DOM-Prototypen.)

Diese Technik könnte genauso gut verwendet werden, auf alle zugrunde liegenden DOM-mutation-Funktionen wie insertBeforereplaceChild oder removeChild.

Das ist die Allgemeine Idee, diese demos angepasst werden könnte für so ziemlich jeden anderen Anwendungsfall -- sagen Sie, Sie wollen, um ein weites Netz Auswerfen und fangen alle Ergänzungen unabhängig von der Art UND stellen Sie sicher, es funktioniert auf alle Browser alles, aber IE < 8? (siehe Beispiel C unten)

UPDATE

C. Rekursiv zu Fuß den DOM, die swap-Funktion auf jedes element zum auslösen einer Rückruf, und dann wenden Sie den gleichen patch auf alle Kinder, die angehängt wird.

var DOMwatcher = function(root, callback){
  var __appendChild = document.body.appendChild;

  var patch = function(node){
    if(typeof node.appendChild !== 'undefined' && node.nodeName !== '#text'){
      node.appendChild = function(incomingNode){
        callback(node, incomingNode);
        patch(incomingNode);
        walk(incomingNode);
        __appendChild.call(node, incomingNode);
      };
    }
    walk(node);  
  };

  var walk = function(node){
    var i = node.childNodes.length;
    while(i--){
      patch(node.childNodes[i]);
    }
  };

  patch(root);

};

DOMwatcher(document.body, function(targetElement, newElement){ 
   alert('append detected');    
});

$('#container ul li').first().append('<div><p>hi</p></div>');
$('#container ul li div p').append('<a href="#foo">bar</a>');

fiddle-demo für C

UPDATE 2

Als Tim Nach Unten kommentiert, die oben genannte Lösung auch nicht in IE < 8 weil appendChild ist nicht ein Function und nicht unterstützen call oder apply. Ich nehme an, Sie könnten immer wieder fallen zu klobig, aber treuen setInterval Methode, wenn typeof document.body.appendChild !== 'function'.

InformationsquelleAutor der Antwort Daniel Mendel

JCADE (JQuery Erstellen und Zerstören Ereignisse) wird dies tun. Es verwendet Verhalten für den IE und DOM-mutation-events für andere Browser. Es verwendet nicht die timing-Ereignisse und nicht wickeln JQuery-Methoden wie livequery.

https://github.com/snesin/jcade

 
$( document ).create ( "", function( event ) { 
alert( event.Ziel ); 
}); 

InformationsquelleAutor der Antwort user1028943

Wenn Sie auf der Suche nach einer alternative zu dieser Methode, hier ist http://www.jqui.net/jquery-projects/jquery-mutate-official/ kann auch ermöglichen es Ihnen, hinzufügen von Ereignissen sich selbst und halten Sie eine Uhr für fast jede änderung, Klassennamen ändern, Höhe ändern, die Breite ändern.

InformationsquelleAutor der Antwort Val