Détecter les modifications du DOM dans une div

Invité · 01/12/2011, 12h15

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Rachel** · 01/12/2011, 14h43

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

**BaBeuH** · 01/12/2011, 15h08

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

A+

Invité · 01/12/2011, 17h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).on('click', '.call_applet', function(e) {
			e.preventDefault();
			alert('click');
		});

Et ça fonctionne comme sur des roulettes.

Détecter les modifications du DOM dans une div

jQuery

Vue hybride

Discussions similaires

Partager

Partager