Détecter les modifications du contenu des éléments avec jQuery

change() La fonction fonctionne et détecte les changements sur les éléments du formulaire, mais y a-t-il un moyen de détecter quand le contenu d'un élément DOM a été modifié?

Cela ne fonctionne pas, sauf s'il #contents'agit d'un élément de formulaire

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

Je veux que cela se déclenche lorsque vous faites quelque chose comme:

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

De plus, html()ou la append()fonction n'a pas de rappel.

Aucune suggestion?

Ce sont des événements de mutation .

Je n'ai pas utilisé d'API d'événement de mutation dans jQuery, mais une recherche rapide m'a conduit à ce projet sur GitHub. Je ne connais pas la maturité du projet.

Je sais que cet article date d'un an, mais j'aimerais proposer une approche de solution différente à ceux qui ont un problème similaire:

1. L'événement de modification jQuery est utilisé uniquement sur les champs d'entrée utilisateur car si quelque chose d'autre est manipulé (par exemple, un div), cette manipulation provient du code. Alors, trouvez où la manipulation a lieu, puis ajoutez tout ce dont vous avez besoin.

2. Mais si ce n'est pas possible pour une raison quelconque (vous utilisez un plugin compliqué ou ne trouvez aucune possibilité de "rappel"), alors l'approche jQuery que je suggérerais est:

   une. Pour une manipulation simple du DOM, utilisez le chaînage et le parcours jQuery,$("#content").html('something').end().find(whatever)....

   b. Si vous souhaitez faire autre chose, utilisez jQuery bindavec un événement personnalisé ettriggerHandler

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

Voici un lien vers le gestionnaire de déclencheurs jQuery: http://api.jquery.com/triggerHandler/

Le navigateur ne déclenchera pas l'événement onchange pour les <div>éléments.

Je pense que le raisonnement derrière cela est que ces éléments ne changeront pas à moins qu'ils ne soient modifiés par javascript. Si vous devez déjà modifier l'élément vous-même (plutôt que l'utilisateur qui le fait), vous pouvez simplement appeler le code d'accompagnement approprié en même temps que vous modifiez l'élément, comme ceci:

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

Vous pouvez également déclencher manuellement un événement comme celui-ci:

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

Si aucune de ces solutions ne convient à votre situation, pourriez-vous s'il vous plaît donner plus d'informations sur ce que vous essayez d'accomplir spécifiquement?

qu'en est-il de http://jsbin.com/esepal/2

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

Cet événement est obsolète au profit de l' API Mutation Observer

Essayez de vous lier à l' DOMSubtreeModifiedévénement seeign car test fait également partie du DOM.

voir ce post ici sur SO:

comment-surveiller-le-dom-pour-les-changements

Essayez ceci, il a été créé par James Padolsey (JP ici sur SO) et fait exactement ce que vous voulez (je pense)

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

Et avec HTML5, nous avons des observateurs de mutation DOM natifs .

Ce n'est pas strictement une réponse jQuery - mais utile à mentionner pour le débogage.

Dans Firebug, vous pouvez cliquer avec le bouton droit de la souris sur un élément de l'arborescence DOM et configurer 'Break on Attribute Change':

Lorsqu'un attribut est modifié dans un script, la fenêtre de débogage apparaît et vous pouvez suivre ce qui se passe. Il existe également une option pour l'insertion et la suppression d'éléments ci-dessous (masquée inutilement par la fenêtre contextuelle dans la capture d'écran).

Je développe une petite bibliothèque JS appelée mutabor ( https://github.com/eskat0n/mutabor ) qui vise à simplifier l'utilisation des événements de mutation DOM. Voir demo.html pour des exemples.

Essayez le plugin livequery. Cela semble fonctionner pour quelque chose de similaire que je fais.

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

Souvent, un moyen simple et efficace pour y parvenir est de savoir quand et où vous modifiez le DOM.

Vous pouvez le faire en créant une fonction centrale qui est toujours responsable de la modification du DOM. Vous effectuez ensuite le nettoyage dont vous avez besoin sur l'élément modifié à partir de cette fonction.

Dans une application récente, je n'avais pas besoin d'action immédiate, j'ai donc utilisé un rappel pour la fonction handly load (), pour ajouter une classe à tous les éléments modifiés, puis mis à jour tous les éléments modifiés toutes les quelques secondes avec une minuterie setInterval.

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

Ensuite, vous pouvez le gérer comme vous le souhaitez - par exemple

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

Vous pouvez ajouter une option de rappel à la fonction html (ou toute autre):

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

Démo ici.

Vous faites le changement sur un élément, pas l'élément est forcé de changer par quelque chose que vous devez attraper.

J'ai écrit un extrait qui vérifiera la modification d'un élément sur un événement.

Donc, si vous utilisez un code javascript tiers ou quelque chose du genre et que vous avez besoin de savoir quand quelque chose apparaît ou change lorsque vous avez cliqué, vous le pouvez.

Pour l'extrait ci-dessous, disons que vous devez savoir quand le contenu d'un tableau change après avoir cliqué sur un bouton.

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

Pseudo code:

• Une fois que vous cliquez sur un bouton
• le html de l'élément que vous vous attendez à changer est capturé
• on vérifie ensuite continuellement le html de l'élément
• quand on trouve que le html est différent on arrête la vérification

Nous pouvons y parvenir en utilisant les événements de mutation . Selon www.w3.org, le module d'événement de mutation est conçu pour permettre la notification de tout changement dans la structure d'un document, y compris les modifications d'attr et de texte. Pour plus de détails ÉVÉNEMENTS DE MUTATION

Par exemple :

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

Pas possible, je crois que c'est-à-dire a un événement de contenu modifié mais ce n'est certainement pas x-browser

Dois-je dire pas possible sans un mauvais intervalle en arrière-plan!