Feu jQuery événement sur les div changement

Question

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 je n'ai absolument aucun contrôle sur la façon dont 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.

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

Answer 1

Vous pouvez utiliser DOMNodeInserted et DOMNodeRemoved afin de vérifier si des éléments sont ajoutés ou supprimés. Malheureusement, IE ne prend pas en charge cette.

$('#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 pouvez inclure l' DOMSubtreeModified , parce que j'ai découvert que l' DOMNodeInserted et DOMNodeRemoved ne se déclenche pas si un élément de l' innerHTML est remplacé directement. Cela ne fonctionne toujours pas sous IE, mais au moins il fonctionne très bien dans d'autres navigateurs.

Answer 2

essayez quelque chose comme ça...

    $('#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 l' 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)

Answer 3

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

Une solution pourrait être l'utilisation d'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!

Answer 4

Vous pouvez utiliser le live de la méthode.

Description: Attacher un gestionnaire à l'événement pour tous les éléments qui correspondent au sélecteur de courant, maintenant et dans l'avenir.

http://api.jquery.com/live/

ce qui concerne