JQuery événement : Détecter les modifications apportées au html/texte d’un div

Question

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

Y a-t-il un moyen de détecter des modifications sur mon div à tout moment?

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

Quelque chose comme ça ferait

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

Answer 1

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

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

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

Answer 2

Vous pouvez essayer ceci

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

});
 

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

Answer 3

Vous êtes à la recherche pour MutationObserver ou la Mutation des Événements. Ne sont pris en charge partout, ni regardé à affectueusement par le développeur monde.

Si vous connaissez (et peut-assurez-vous que) le div de taille va changer, vous pouvez être en mesure d'utiliser le crossbrowser événement de redimensionnement.

Answer 4

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

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

Tout d'abord,

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

Maintenant, vous pouvez vous abonner divhtmlchanging/divhtmlchanged événements 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 votre div modifications de contenu par le biais de ce changeHtml() fonction. Ainsi, vous pouvez surveiller ou peut faire les changements nécessaires en conséquence car lier rappel argument données contenant les informations.

Vous devez changer votre div html comme ceci;

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

Et aussi, vous pouvez l'utiliser pour n'importe quel élément html(s) à l'exception de l'élément d'entrée. De toute façon, vous pouvez le modifier pour l'utiliser avec n'importe quel élément(s).

Answer 5

Vous pouvez stocker l'ancien innerHTML de la 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.