Discussion :

[grafistolage]

Bonjour

Je cherche à afficher dynamiquement des DIV à l'aide d'une boucle, qui ont cette forme :

Code :

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

<div id="totoId" class="totoClass" onClick="clic(totoId);">Contenu de mon div</div>

Voici une partie du code qui permet de faire ceci :

Code :

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

1
2
3
4
5
 
d=document.createElement("div");
d.id="toto"+tab[i];
d.className="totoClass";
d.appendChild(document.createTextNode("Contenu de mon div"));

Maintenant, j'aimerais pouvoir ajouter un événement "onClick" à ce DIV et c'est là que je patauge. Voilà ce que je tente de faire :

Code :

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

1
2
3
 
cache = document.getElementById("toto"+tab[i]);
cache.addEventListener("click", function () { clic("toto"+tab[i]); }, false);

Et quand je regarde mon code source généré, mon DIV est correctement construit avec son ID et sa CLASSE, mais aucune trace d'un éventuel "onClick=clic("toto"+5)" par exemple.

Quelqu'un peut-il m'expliquer la démarche d'insertion d'événement dans mon DIV svp ?

[marcha]

Salut,

Ceci marche chez moi:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	d=document.createElement("div");
	d.id="toto1";
	d.className="totoClass";
	d.appendChild(document.createTextNode("Contenu de mon div"));
	document.body.appendChild(d);
	var cache = document.getElementById("toto1");
	cache.addEventListener("click", function () { 
		alert('hello');
	}, false);

[Macmillenium]

Ici

Code :

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

1
2
 
cache.addEventListener("click", function () { clic("toto"+tab[i]); }, false);

Je vois un problème de closure, la valeur de i correspond à celle en fin de boucle (tab.length). Pour remédier à cela, il suffit de passer par une IEF:

Code :

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

1
2
3
4
5
6
 
cache.addEventListener("click", function (i) {  
    return function() {
        clic("toto"+tab[i]);
    } 
}(i), false);

[grafistolage]

Merci à vous deux. En effet, le problème était bien lié à la boucle.
Ca fonctionne !