web-dev-qa-db-fra.com

jQuery sur la charge de l'élément dynamique

J'essaie de faire une manipulation conditionnelle d'éléments qui sont ajoutés dynamiquement à un conteneur sur une page, mais il me manque un événement.

Disons que j'ai un conteneur:

<div id="container"></div>

Je peux facilement lier un gestionnaire d'événements à la fonction click pour tous les nouveaux éléments, en utilisant

$('#container').on('click', '.sub-element', function() { ... });

Mais à quoi dois-je me lier pour obtenir un hook "ponctuel" lorsque l'élément est ajouté à #container. J'ai essayé de me lier à ready et load en vain. Y a-t-il un moyen de le faire ou dois-je trouver une autre solution à mon problème?

Ce violon contient mon exemple non fonctionnel .

jqueryjquery-1.7
35
Klaus Byskov Pedersen

Vous pouvez déclencher un événement personnalisé sur l'élément DOM nouvellement ajouté qui peut être récupéré par un gestionnaire d'événements jQuery:

//bind to our custom event for the `.sub-element` elements
$('#container').on('custom-update', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
});

//append a new element to the container,
//then select it, based on the knowledge that it is the last child of the container element,
//and then trigger our custom event on the element
$('#container').append('<div class="sub-element">No worky!</div>').children().last().trigger('custom-update');

Voici une démo: http://jsfiddle.net/ggHh7/4/

Cette méthode vous permet de faire quelque chose globalement même si vous chargez le contenu dynamique via différentes méthodes.

Mise à jour

Je ne suis pas sûr de la prise en charge du navigateur (je suppose que IE8 et les versions antérieures ne le prennent pas en charge), mais vous pouvez utiliser l'événement de mutation DOMNodeInserted pour détecter lorsqu'un élément DOM est ajouté:

$('#container').on('DOMNodeInserted', '.sub-element', function(){
    $(this).html('<b>yaay!</b>');
})

$('#container').append('<div class="sub-element">No worky!</div>');

Voici une démo: http://jsfiddle.net/ggHh7/7/

MISE À JOUR

Il existe une nouvelle API pour cela car DOMNodeInserted est amorti à ce moment. Je ne l'ai pas examiné mais il s'appelle MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

36
Jasper

Après avoir lu la réponse ci-dessus, je l'utilise maintenant avec succès:

$('body').on({
   DOMNodeInserted : function(){
      alert('I have been added dynamically');
   },
   click : function(){
      alert('I was clicked');
   },
   '.dynamicElements'
});

Maintenant, tous mes dynamicElements peuvent faire des choses au fur et à mesure de leur chargement, en utilisant la superbe carte d'événements .on().

8
tim