Existe-t-il un événement jQuery qui se déclenche lorsqu'un nouveau noeud est inséré dans le dom?

Question

Est-il un événement jquery feux sur un élément du dom lorsqu'il est inséré dans les dom?

E. g. disons que je charge un peu de contenu via ajax et l'ajouter au DOM et dans certains autres morceau de javascript, je pourrais ajouter un événement à l'aide .live (), de sorte que lorsqu'un événement spécifique correspondant à un sélecteur est ajouté au DOM l'événement se déclenche sur ledit élément. Semblable à $(document).ready (), mais sur le contenu qui est ajouté au DOM de manière dynamique.

Ce que je suis en train de rêver de:

$('.myClass').live('ready', function() {
    alert('.myClass added to dom');
});

Si jquery ne supporte pas une telle chose, alors il y a un autre moyen je pourrais obtenir cette fonctionnalité, sans modifier le code ne fait les initiales de manipulation du dom?

Answer 1

obsolète: comme par @Meglio commentaire ci-dessous, l' DOMNodeInserted événement est obsolète, et sera supprimée à partir du web à certains unkown temps dans l'avenir. Pour les meilleurs résultats, commencer à apprendre à propos de la MutationObserver API.

voir @dain réponse ci-dessous.

Si vous liez le 'DOMNodeInserted de l'événement pour le document ou le corps directement, il sera exécuté à chaque fois que quelque chose est inséré n'importe où. Si vous souhaitez que le callback à exécuter uniquement lorsqu'un type particulier d'élément est ajouté, il serait sage que vous utilisez délégué événements.

Habituellement, si vous ajoutez une classe d'éléments du DOM, vous serez en les ajoutant à un parent commun. Il faut donc fixer le gestionnaire d'événement comme ceci:

$('body').on('DOMNodeInserted', '#common-parent', function(e) {
  if ($(e.target).attr('class') === 'myClass') {
    console.log('hit');
  }
});

Fondamentalement, la même réponse que Myke est au-dessus, mais puisque vous êtes à l'aide d'un délégué du gestionnaire d'événement plutôt qu'un gestionnaire d'événement, le code n'en sera tiré de moins en moins souvent.

NOTE:

$('body').on('DOMNodeInserted', '.myClass', function(e) {
  console.log(e.target);
});

Cela semble trop de travail... mais je ne sais pas pourquoi.

Answer 2

L' .livequery() plugin sert encore ce créneau besoin, comme ceci:

$('.myClass').livequery(function() {
  alert('.myClass added to dom');
});

Si vous passer juste une fonction de rappel, comme ci-dessus, ça va fonctionner pour chaque nouvel élément qu'il trouve, à la fois à l'origine et comme ils sont ajoutés. L'intérieur de la fonction this se réfère à l'élément ajouté.

.live() de l'écoute des événements de la bulle, donc ne correspondent pas à cette "lorsque des éléments sont ajoutés" la situation, à cet égard, .livequery() (le plugin) n'a pas été complètement remplacé par l'ajout d' .live() de base, seule la remontée d'événements partie (pour la plupart) a été.

Answer 3

Si vous vivez à la pointe de la technologie, vous pouvez utiliser MutationObserver :)

   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
  var list = document.querySelector('ol');

  var observer = new MutationObserver(function(mutations) {  
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        var list_values = [].slice.call(list.children)
            .map( function(node) { return node.innerHTML; })
            .filter( function(s) {
              if (s === '<br>') {
                return false;
              }
              else {
                return true;
              }
        });
        console.log(list_values);
      }
    });
  });

  observer.observe(list, {
    attributes: true, 
    childList: true, 
    characterData: true 
   });
 

Voir: https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Answer 4

Il n'y a pas d'événement jQuery, mais un événement DOM: DOMNodeInsertedIntoDocument. Vous pouvez écouter les événements DOM en utilisant la méthode de jQuery. Alors:

 $('.myClass').on('DOMNodeInsertedIntoDocument', function() {
  alert('myClass was inserted into the DOM');
}
 

Cela peut être préférable à l'utilisation de liveQuery car ce plugin est un peu obsolète (pas de mises à jour depuis plus de 2 ans, ce qui promet une prise en charge de jQuery 1.2.x).