Détecter les modifications du DOM dans une div

Version imprimable

01/12/2011, 12h15
Invité

Détecter les modifications du DOM dans une div
Bonjour à tous.

Dans ma page, j'ai une div #list qui contient une liste de div de classe .call. Des filtres permettent à l'internaute de modifier cette liste de div dynamiquement.

Pour une autre fonctionnalité, j'ai associé à toutes les div de la classe .call un écouteur d'événements.
Je l'ai fait avec jQuery de la manière suivante :
Code:

1 2 3 4 5 6 $().ready(function () { $('.call').click(function (e) { e.preventDefault(); alert('click!'); }); });
Le problème : lorsque les filtres remanient le contenu de #list (suppression et ajout de div .call), l'écouteur d'événements ne fonctionne plus.

J'aimerais donc pouvoir l'associer à toute la classe .call dès que le DOM est modifié à l'intérieur de #list.

Est-ce possible ? Si oui, comment ?
(De préférence avec Vanilla JS et/ou jQuery)

Merci.
01/12/2011, 14h43
Rachel

si c'est comme le getElementsByClassName en js, il doit te retourner un tableau contenant tous les éléments ayant la classe demandée.
donc, pour ajouter un onclick à une div, je pense que tu devrais faire une boucle qui ajoute cet évènement à chaque div du tableau :?
je n'ai jamais essayé ceci avec jQuery, donc désolé si cela ne marche pas

Selon la version de jquery, il existe plusieurs possibilités pour répondre à tes besoins :
Code:

1 2 3 $(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+
Le principe est (en gros, voire trés gros) que cela attache un gestionnaire d'évènement au document. Ensuite, lorsqu'un évènement est déclenché, cet évènement se propage jusqu'à son plus grand parent (à savoir le document) et si l'élément déclencheur correspond au sélecteur utilisé, la fonction attaché à l'évènement est exécutée.

De cette façon, même les éléments ajoutés dynamiquement une fois que le DOM est chargé, interagissent...

Cela donnerait dans ton cas si tu utilises jquery 1.3+ :
Code:

1 2 3 4 5 6 $(document).ready(function () { $('.call').live("click",function (e) { e.preventDefault(); alert('click!'); }); });
A+

01/12/2011, 17h14
Invité
Merci rotrevrep pour ta réponse. Je crains cependant que tu n'aies pas saisi mon problème : l'extrait de script que j'ai publié fonctionne parfaitement. Et il a même l'intérêt de mieux fonctionner que la méthode getElementsByClassName qui, elle, n'est pas disponible sur des navigateurs comme IE7 ou Safari 3.

Merci BaBeuH, également, pour cette solution !
Concernant ma version de jQuery, j'inclus dans mon <head> le chemin vers la librairie maintenue par Google (http://ajax.googleapis.com/ajax/libs.../jquery.min.js), donc je dois être à la 1.7+.

J'ai essayé le code suivant :
Code:

1 2 3 4 $(document).on('click', '.call_applet', function(e) { e.preventDefault(); alert('click'); });
Et ça fonctionne comme sur des roulettes.