Erkennen Sie Änderungen des Elementinhalts mit jQuery

change() Die Funktion funktioniert und erkennt Änderungen an Formularelementen. Gibt es jedoch eine Möglichkeit zu erkennen, wann der Inhalt eines DOM-Elements geändert wurde?

Dies funktioniert nur, wenn #contentes sich um ein Formularelement handelt

$("#content").change( function(){
    // do something
});

Ich möchte, dass dies ausgelöst wird, wenn Folgendes ausgeführt wird:

$("#content").html('something');

Auch html()oder append()Funktion haben keinen Rückruf.

Irgendwelche Vorschläge?

Dies sind Mutationsereignisse .

Ich habe in jQuery keine Mutationsereignis-APIs verwendet, aber eine flüchtige Suche führte mich zu diesem Projekt auf GitHub. Ich bin mir der Reife des Projekts nicht bewusst.

Ich weiß, dass dieser Beitrag ein Jahr alt ist, aber ich möchte denjenigen, die ein ähnliches Problem haben, einen anderen Lösungsansatz bieten:

1. Das jQuery-Änderungsereignis wird nur für Benutzereingabefelder verwendet, da diese Manipulation von Code stammt, wenn etwas anderes manipuliert wird (z. B. ein Div). Finden Sie also heraus, wo die Manipulation stattfindet, und fügen Sie dort alles hinzu, was Sie benötigen.

2. Aber wenn dies aus irgendeinem Grund nicht möglich ist (Sie verwenden ein kompliziertes Plugin oder finden keine "Rückruf" -Möglichkeiten), würde ich den jQuery-Ansatz vorschlagen:

   ein. Verwenden Sie für eine einfache DOM-Manipulation die jQuery-Verkettung und -Überquerung.$("#content").html('something').end().find(whatever)....

   b. Wenn Sie etwas anderes tun möchten, setzen Sie jQuery's bindmit benutzerdefiniertem Ereignis und eintriggerHandler

   $("#content").html('something').triggerHandler('customAction');
   
   $('#content').unbind().bind('customAction', function(event, data) {
      //Custom-action
   });

Hier ist ein Link zum jQuery-Trigger-Handler: http://api.jquery.com/triggerHandler/

Der Browser löst das Ereignis onchange für <div>Elemente nicht aus.

Ich denke, der Grund dafür ist, dass sich diese Elemente nur ändern, wenn sie durch Javascript geändert werden. Wenn Sie das Element bereits selbst ändern müssen (und nicht vom Benutzer), können Sie einfach den entsprechenden Begleitcode aufrufen, während Sie das Element ändern, wie folgt:

 $("#content").html('something').each(function() { });

Sie können ein Ereignis wie dieses auch manuell auslösen:

 $("#content").html('something').change();

Wenn keine dieser Lösungen für Ihre Situation geeignet ist, können Sie bitte weitere Informationen darüber geben, was Sie speziell erreichen möchten?

Was ist mit http://jsbin.com/esepal/2?

$(document).bind("DOMSubtreeModified",function(){
  console.log($('body').width() + ' x '+$('body').height());
})

Dieses Ereignis wurde zugunsten der Mutation Observer-API abgelehnt

Versuchen Sie, sich an die zu binden DOMSubtreeModified Ereignis seeign da der Test ebenfalls nur ein Teil des DOM ist.

siehe diesen Beitrag hier auf SO:

Wie-überwache ich-den-Dom-für-Änderungen?

Versuchen Sie dies, es wurde von James Padolsey (JP hier auf SO) erstellt und macht genau das, was Sie wollen (glaube ich)

http://james.padolsey.com/javascript/monitoring-dom-properties/

Und mit HTML5 haben wir native DOM-Mutationsbeobachter .

Es ist nicht unbedingt eine jQuery-Antwort - aber nützlich, um sie beim Debuggen zu erwähnen.

In Firebug können Sie mit der rechten Maustaste auf ein Element in der DOM-Struktur klicken und "Bei Attributänderung unterbrechen" einrichten:

Wenn ein Attribut in einem Skript geändert wird, wird das Debug-Fenster angezeigt und Sie können nachverfolgen, was gerade passiert. Im Folgenden finden Sie auch eine Option zum Einfügen und Entfernen von Elementen (die durch das Popup im Bildschirmgrab nicht hilfreich verdeckt wird).

Ich entwickle eine winzige JS-Bibliothek namens mutabor ( https://github.com/eskat0n/mutabor ), die die Verwendung von DOM-Mutationsereignissen vereinfachen soll. Beispiele finden Sie in demo.html.

Probieren Sie das Livequery-Plugin aus. Das scheint für etwas Ähnliches zu funktionieren, das ich tue.

http://docs.jquery.com/Plugins/livequery

Eine einfache und effektive Möglichkeit, dies zu erreichen, besteht häufig darin, zu verfolgen, wann und wo Sie das DOM ändern.

Sie können dies tun, indem Sie eine zentrale Funktion erstellen, die immer für die Änderung des DOM verantwortlich ist. Innerhalb dieser Funktion führen Sie dann alle erforderlichen Bereinigungen für das geänderte Element durch.

In einer neueren Anwendung war keine sofortige Aktion erforderlich, daher habe ich einen Rückruf für die Funktion handly load () verwendet, um geänderten Elementen eine Klasse hinzuzufügen, und dann alle geänderten Elemente alle paar Sekunden mit einem setInterval-Timer aktualisiert.

$($location).load("my URL", "", $location.addClass("dommodified"));

Dann können Sie damit umgehen, wie Sie wollen - z

setInterval("handlemodifiedstuff();", 3000); 
function handlemodifiedstuff()
{
    $(".dommodified").each(function(){/* Do stuff with $(this) */});
}

Sie können der HTML-Funktion (oder einer beliebigen Funktion) eine Rückrufoption hinzufügen:

$.fn.oldHtml = $.fn.html;
$.fn.html = function(html,fn){
  fn = fn || function(){};
  var result =  this.oldHtml(html);
  fn();
  return result;
};
$('body').html(11,function(){alert("haha");});

Demo hier.

Sie nehmen die Änderung an einem Element vor, nicht das Element muss sich durch etwas ändern, das Sie abfangen müssen.

Ich habe ein Snippet geschrieben, das die Änderung eines Elements in einem Ereignis überprüft.

Wenn Sie also Javascript-Code von Drittanbietern oder ähnliches verwenden und wissen müssen, wann etwas angezeigt wird oder sich ändert, wenn Sie darauf geklickt haben, können Sie dies tun.

Angenommen, Sie müssen für das folgende Snippet wissen, wann sich der Inhalt einer Tabelle ändert, nachdem Sie auf eine Schaltfläche geklickt haben.

$('.button').live('click', function() {

            var tableHtml = $('#table > tbody').html();
            var timeout = window.setInterval(function(){

                if (tableHtml != $('#table > tbody').
                    console.log('no change');
                } else {
                    console.log('table changed!');
                    clearInterval(timeout);
                }

            }, 10);
        });

Pseudocode:

• Sobald Sie auf eine Schaltfläche klicken
• Das HTML des Elements, dessen Änderung Sie erwarten, wird erfasst
• Wir überprüfen dann kontinuierlich das HTML des Elements
• Wenn wir feststellen, dass das HTML anders ist, beenden wir die Überprüfung

Wir können dies erreichen, indem wir Mutationsereignisse verwenden . Laut www.w3.org soll das Mutationsereignismodul die Benachrichtigung über Änderungen an der Struktur eines Dokuments ermöglichen, einschließlich Änderungen von Attributen und Texten. Für mehr Details MUTATION EVENTS

Zum Beispiel :

$("body").on('DOMSubtreeModified', "#content", function() {
    alert('Content Modified'); // do something
});

Nicht möglich, ich glaube dh hat ein inhaltsverändertes Ereignis, aber es ist sicherlich kein X-Browser

Sollte ich sagen, nicht möglich, ohne dass ein böses Intervall im Hintergrund tuckert!