Feu jQuery événement sur les div changement

J'ai un div dont le contenu peut être modifié de différentes façons: par exemple, son contenu peut être rechargé via innerHTML, ou les nœuds peuvent être ajoutés via les méthodes du DOM. En revanche, cela peut se produire via javascript natif ou indirectement via des appels à jQuery API ou via d'autres bibliothèques.

Je veux exécuter du code lorsque le contenu de la div changements, mais j'ai absolument aucun contrôle sur comment il va changer. En effet, je suis en train de concevoir un widget qui peut être utilisé par d'autres personnes, qui sont libres de modifier le contenu de leur divs la façon qu'ils préfèrent. Lorsque le contenu intérieur de ce div changements, la forme de gadget peut être mis à jour en tant que bien.

Je suis en utilisant jQuery. Est-il un moyen de capturer l'événement que le contenu de cette div qui a changé, cependant, il s'est passé?

InformationsquelleAutor Andrea | 2011-02-12
  1. 70

    Vous pouvez utiliser DOMNodeInserted et DOMNodeRemoved de vérifier si des éléments sont ajoutés ou supprimés. Malheureusement, IE ne supporte pas cela.

    $('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
        alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
        alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    }
});

    Mise à jour

    Vous pourriez enregistrer le contenu initial et des changements à venir avec .data(). Voici un exemple.

    var div_eTypes = [],
    div_changes = [];
$(function() {
    $('#myDiv').each(function() {
        this['data-initialContents'] = this.innerHTML;
    }).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
        div_eTypes.concat(e.type.match(/insert|remove/));
        div_changes.concat(this.innerHTML);
    });
});

    Exemple de sortie:

    > $('#myDiv').data('initialContents');
"<h1>Hello, world!</h1><p>This is an example.</p>"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["<iframe src='http://example.com'></iframe>", "<h4>IANA — Example domains</h4><iframe src='http://example.com'></iframe>", "<h4>IANA – Example domains</h4>"]

    Mise à jour 2

    Vous voudrez peut-être inclure DOMSubtreeModified en tant que bien, parce que j'ai trouvé que DOMNodeInserted et DOMNodeRemoved ne déclenchent pas si un élément innerHTML est remplacé directement. Cela ne fonctionne toujours pas sous IE, mais au moins il fonctionne très bien dans d'autres navigateurs.

    InformationsquelleAutor nyuszika7h
  2. 7

    essayer quelque chose comme cela... 

        $('#divId').bind('DOMNodeInserted', function(event) {
             alert('inserted ' + event.target.nodeName + //new node
           ' in ' + event.relatedNode.nodeName); //parent
       });

    IE ne supporte pas elle se trouve dans la mais je pense que le plus proche est le propertychange événement, qui se déclenche en réponse à un changement dans un attribut ou une propriété CSS d'un élément, mais il n'a pas le feu en réponse à innerHTML évolution, ce qui aurait été proche de ce que tu voulais.

    encore une solution envisageable est de surcharger une fonction de manipulation de jquery...

    Jetez un oeil sur cette discussion..Préféré façon de modifier les éléments qui n'ont pas encore été créé (en plus d'événements)

    InformationsquelleAutor Vivek
  3. 1

    Il n'existe pas un tel événement (onChange) en javascript, ni jQuery, vous devez créer un événement personnalisé.

    Pourrait être une des solutions à l'aide de lowpro pour associer un comportement à cet élément, vous voulez être contrôlé, ce comportement serait sérialiser l'élément, puis créer un sondage qui vérifie toutes les x millisecondes pour voir si l'élément a changé, si changé, puis déclencher votre événement personnalisé sur cet élément.

    Vous avez quelques exemples sur la façon d'utiliser lowpro avec jQuery ici:
    http://www.learningjquery.com/2008/05/using-low-pro-for-jquery

    Bonne chance!

    • Il y a est, DOMNodeInserted, mais IE ne le supporte pas.
    • Encore ce n'est pas le cas, il est à la recherche de l'élément peut changer withtout avoir un Nœud Inséré ou supprimé.... Imaginez qu'il ne contient que du texte et le texte est supprimé, DOMNodeInserted wouldnt feu et toujours l'élément est modifié...
    • Voir ma réponse. J'ai inclus DOMNodeRemoved, trop.
    • Je ne pense pas que vous lisez la question, il dit que le contenu est peut-être changé, si vous avez un div comme <div>bonjour</div>, et vous chnage le contenu de <div>bye</div> il n'y a pas de nœud supprimé ou inséré
    • J'ai mis à jour ma réponse avec DOMSubtreeModified. Il devrait maintenant fonctionner correctement dans non-IE navigateurs.
    InformationsquelleAutor Fernando Diaz Garrido