Événement jQuery: Détecter les modifications apportées au html / texte d'un div

J'ai un div qui a son contenu change tout le temps, que ce soit ajax requests, jquery functions, bluretc , etc.

Existe-t-il un moyen de détecter les changements sur ma div à tout moment?

Je ne veux utiliser aucun intervalle ou valeur par défaut vérifiée.

Quelque chose comme ça ferait

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

Si vous ne voulez pas utiliser la minuterie et vérifier innerHTML, vous pouvez essayer cet événement

$('mydiv').bind('DOMSubtreeModified', function(){
  console.log('changed');
});

Plus de détails et les données de support du navigateur sont ici .

Attention: dans les versions plus récentes de jQuery, bind () est obsolète, vous devez donc utiliser on () à la place:

$('body').on('DOMSubtreeModified', 'mydiv', function(){
  console.log('changed');
});

Utilisation de 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);

Puisque $("#selector").bind()est obsolète , vous devez utiliser:

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

Vous pouvez essayer ceci

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

});

mais cela pourrait ne pas fonctionner dans Internet Explorer, je ne l'ai pas testé

Vous recherchez MutationObserver ou Mutation Events . Ni l'un ni l'autre ne sont pris en charge partout et ne sont pas considérés avec trop d'affection par le monde des développeurs.

Si vous savez (et pouvez vous assurer que) la taille du div changera, vous pourrez peut-être utiliser l' événement de redimensionnement du crossbrowser .

Le code suivant fonctionne pour moi.

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

J'espère que cela aidera quelqu'un :)

Il n'y a pas de solution intégrée à ce problème, c'est un problème avec votre modèle de conception et de codage.

Vous pouvez utiliser le modèle éditeur / abonné. Pour cela, vous pouvez utiliser des événements personnalisés jQuery ou votre propre mécanisme d'événements.

Première,

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 });
}

Vous pouvez maintenant vous abonner aux événements divhtmlchanging / divhtmlchanged comme suit,

$(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
});

Maintenant, vous devez changer vos modifications de contenu div via cette changeHtml()fonction. Vous pouvez donc surveiller ou effectuer les modifications nécessaires en conséquence, car l'argument de données de rappel de liaison contenant les informations.

Vous devez changer le code HTML de votre div comme ceci;

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

Et aussi, vous pouvez l'utiliser pour tout élément html à l'exception de l'élément d'entrée. Quoi qu'il en soit, vous pouvez le modifier pour l'utiliser avec n'importe quel élément.

Utilisez MutationObserver comme on le voit dans cet extrait fourni par Mozilla , et adapté de ce billet de blog

Alternativement, vous pouvez utiliser l'exemple JQuery vu dans ce lien

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();

Vous pouvez stocker l'ancien innerHTML du div dans une variable. Définissez un intervalle pour vérifier si l'ancien contenu correspond au contenu actuel. Quand ce n'est pas vrai, faites quelque chose.

Essayez le MutationObserver:

• https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

prise en charge du navigateur: 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>

L'ajout de contenu à une div, que ce soit via jQuery ou via de DOM-API directement, revient par défaut à la .appendChild()fonction. Ce que vous pouvez faire est de remplacer la .appendChild()fonction de l'objet actuel et d'y implémenter un observateur. Maintenant que nous avons outrepassé notre .appendChild()fonction, nous devons emprunter cette fonction à un autre objet pour pouvoir ajouter le contenu. Pour cela, nous appelons .appendChild()un autre div pour finalement ajouter le contenu. Bien sûr, cela vaut également pour le .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);
        }
    };

Vous trouverez ici un exemple naïf. Vous pouvez l'étendre par vous-même, je suppose. http://jsfiddle.net/RKLmA/31/

Soit dit en passant: cela montre que JavaScript est conforme au principe OpenClosed. :)