webentwicklung-frage-antwort-db.com.de

jQuery-Ereignis: Ermittelt Änderungen an HTML / Text eines Div

Ich habe ein Div, dessen Inhalt sich ständig ändert, sei es ajax requests, jquery functions, blur usw. usw.

Gibt es eine Möglichkeit, Änderungen an meinem Div zu irgendeinem Zeitpunkt zu erkennen?

Ich möchte keine überprüften Intervalle oder Standardwerte verwenden.

So etwas würde reichen

$('mydiv').contentchanged() {
 alert('changed')
}
248
BoqBoq

Wenn Sie den Timer nicht verwenden und innerHTML nicht überprüfen möchten, können Sie dieses Ereignis versuchen

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

Weitere Details und Daten zur Browserunterstützung finden Sie unter hier .

Achtung: in neueren jQuery-Versionen ist bind () veraltet, daher sollten Sie stattdessen on () verwenden:

$("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});
369
iman

Da $("#selector").bind() veraltet ist , sollten Sie verwenden:

$("body").on('DOMSubtreeModified', "#selector", function() {
    // code here
});
44
Artley

Sie können dies versuchen

$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

dies funktioniert jedoch möglicherweise nicht im Internet Explorer und wurde nicht getestet

39
user1790464

Sie suchen nach MutationObserver oder Mutation Events . Weder werden sie überall unterstützt, noch werden sie von der Entwicklerwelt zu gern gesehen.

Wenn Sie wissen (und sicherstellen können), dass sich die Größe des Divs ändert, können Sie möglicherweise das Crossbrowser Resize Event verwenden.

33
rodneyrehm

Mit Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
31
PPB

Der folgende Code funktioniert für mich.

$("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});

Hoffe es wird jemandem helfen :)

19
Sanchit Gupta

Es gibt keine integrierte Lösung für dieses Problem. Dies ist ein Problem mit Ihrem Design und Ihrem Codierungsmuster.

Sie können ein Publisher/Subscriber-Muster verwenden. Hierfür können Sie benutzerdefinierte jQuery-Ereignisse oder Ihren eigenen Ereignismechanismus verwenden.

Zuerst,

function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

Jetzt können Sie divhtmlchanging/divhtmlchanged-Ereignisse wie folgt abonnieren:

$(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

Jetzt müssen Sie Ihre Div-Inhaltsänderungen über diese changeHtml() -Funktion ändern. Auf diese Weise können Sie die erforderlichen Änderungen entsprechend überwachen oder durchführen, da das Argument "Rückrufdaten binden" die Informationen enthält.

Du musst das HTML deines Divs so ändern;

changeHtml('#mydiv', '<p>test content</p>');

Außerdem können Sie dies für alle HTML-Elemente außer Eingabeelementen verwenden. Sie können dies jedoch ändern, um es für jedes Element zu verwenden.

Verwenden Sie MutationObserver , wie in diesem von Mozilla bereitgestellten und von diesem Blogeintrag angepassten Snippet dargestellt

Alternativ können Sie das JQuery-Beispiel in diesem Link zu sehen verwenden

Chrome 18+, Firefox 14+, IE 11+, Safari 6+

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();
8
Anthony Awuley

Sie können das alte innerHTML des div in einer Variablen speichern. Legen Sie ein Intervall fest, um zu überprüfen, ob der alte Inhalt mit dem aktuellen Inhalt übereinstimmt. Wenn das nicht stimmt, mach was.

3
codelove

Probieren Sie den MutationObserver aus:

browser-Unterstützung: http://caniuse.com/#feat=mutationobserver

<html>
  <!-- example from Microsoft https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/documentation/dev-guide/dom/mutation-observers/ -->

  <head>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Inspect the array of MutationRecord objects to identify the nature of the change
function mutationObjectCallback(mutationRecordsList) {
  console.log("mutationObjectCallback invoked.");

  mutationRecordsList.forEach(function(mutationRecord) {
    console.log("Type of mutation: " + mutationRecord.type);
    if ("attributes" === mutationRecord.type) {
      console.log("Old attribute value: " + mutationRecord.oldValue);
    }
  });
}
      
// Create an observer object and assign a callback function
var observerObject = new MutationObserver(mutationObjectCallback);

      // the target to watch, this could be #yourUniqueDiv 
      // we use the body to watch for changes
var targetObject = document.body; 
      
// Register the target node to observe and specify which DOM changes to watch
      
      
observerObject.observe(targetObject, { 
  attributes: true,
  attributeFilter: ["id", "dir"],
  attributeOldValue: true,
  childList: true
});

// This will invoke the mutationObjectCallback function (but only after all script in this
// scope has run). For now, it simply queues a MutationRecord object with the change information
targetObject.appendChild(document.createElement('div'));

// Now a second MutationRecord object will be added, this time for an attribute change
targetObject.dir = 'rtl';


      </script>
    </body>
  </html>
1
juFo

Wenn Sie einem div Inhalte hinzufügen, sei es über jQuery oder direkt über die DOM-API, wird standardmäßig die Funktion .appendChild() verwendet. Sie können die Funktion .appendChild() des aktuellen Objekts überschreiben und einen Beobachter darin implementieren. Nachdem wir nun unsere Funktion .appendChild() überschrieben haben, müssen wir diese Funktion von einem anderen Objekt ausleihen, um den Inhalt anhängen zu können. Deshalb rufen wir die .appendChild() eines anderen div auf, um den Inhalt endgültig anzufügen. Natürlich gilt dies auch für die .removeChild().

var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

Hier finden Sie ein naives Beispiel. Sie können es selbst erweitern, denke ich. http://jsfiddle.net/RKLmA/31/

Übrigens: Dies zeigt, dass JavaScript das OpenClosed-Prinzip erfüllt. :)

0
Andries