Plusieurs addEventListener, seul le dernier fonctionne

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Je rencontre un problème que j'ai déjà résolu mais impossible de retrouver la solution.

Le code génère plusieurs boutons radios depuis une boucle For() et affecte à chacun un événement de souris ("click" en l'occurrence).
Code:

1 2 3 4 5 6 7 8 9 10 11 // on se trouve dans une boucle For() // des IDs sur chaque boutons radios sont bien créés (vérifié) // et enfin une affectation d'événement simple ci-dessous document.getElementById("radio_"+id).valeur = valeur; document.getElementById("radio_"+id).addEventListener("click", function () { alert(this.valeur); }, false); // Fin de la boucle
Mon problème :
L'alert javascript ne fonctionne que sur le dernier bouton radio créé.
Il y a donc un écrasement des événements similaires précédemment créés (vu sur https://developer.mozilla.org/fr/DOM...dEventListener) mais je ne trouve plus comment y remédier.

Merci de votre aide

14/11/2008, 16h29
marcha

Salut,

Tu pourrai donner un peu plus de code, parce que cela semble correct ton extrait.
14/11/2008, 16h35
le_chomeur

si tu es dans une boucle pourquoi ne pas faire directement :

Code:

document.getElementById("radio_"+id).onclick = function(){alert(this.valeur);};
14/11/2008, 16h36
speedev

Parce que ça non plus ça ne marche pas, j'ai testé DOM0, DOM1 et DOM2
14/11/2008, 16h38
le_chomeur

mouai donc le problème vient d'ailleurs :)
montre nous un peu plus ton code

Je vous ai réécris le code en grande partie avec des copier-coller, je ne garanti pas les fautes de frappes ni l'indentation du code...mais ça devrait vous éclairer un peu.

En gros, je récupère un flux XML stocké dans la variable "t_con".
Je parcours les noeuds un peu sauvagement (il y a surement plus optimisé comme technique) mais je suis obligé de faire vite et avec mes connaissances surement limitées...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
for(i=0;i<t_con[0].childNodes.length;i++)
{	
	var code	="";
	var valeur	="";
	var node = t_con[0].childNodes[i];
	if (node.nodeType == 1)
	{
		if(node.firstChild)
		{
			switch(node.nodeName)
			{
				case "PARENT" :
					// init de variables
					for(j=0;j<node.childNodes.length;j++)
					{
						var enfant = node.childNodes[j];
						if (enfant.nodeType == 1)
						{
							if(enfant.firstChild)
							{
								switch(enfant.nodeName)
								{
									case "CODE" : code = enfant.firstChild.nodeValue;
									break;
									case "VALEUR" : valeur = enfant.firstChild.nodeValue;
									break;
									//etc...
								}
							}
						}			
					}			
					document.getElementById("radio_"+code).valeur = valeur;
					addEvent("radio_"+code,"click", function () {
						alert('ok');	
						document.getElementById("conteneur_de_valeur").innerHTML = this.valeur;
						// Je stocke la variable "valeur" dans un div lorsque je clique sur le bouton radio correspondant à son code associé
					}, false);
				break;
			}
		}
	}								
}

Excusez...voici la fonction addEvent...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
function addEvent(objid,ev,fnc,capt){
	var obj = document.getElementById(objid);
	if(obj.addEventListener)
	{
		obj.addEventListener(ev, fnc, capt);
	}
	else if(obj.attachEvent)
	{
		obj.attachEvent(
			'on'+ev,
			function()
			{
				return fnc.apply(obj, arguments);
			}
		);
	}
	else
	{
		if(!obj['on'+ev])
		{
			obj['on'+ev] = fnc;
		}
		else
		{	
			var oldfnc = obj['on'+ev];
			obj['on'+ev] = function(){
				oldfnc();
				fnc();
			}
		}
	}
	return true;
}

:vomi::vomi::vomi::vomi::vomi::vomi::vomi::vomi:

trève de plaisanterie :) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="mesCheck">
	<input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox">
</div>
<script type="text/javascript">
	var listCheck = document.getElementById('mesCheck').getElementsByTagName('input');
	for(var i = 0  , l = listCheck.length ; i <l  ; i++){
		if(listCheck[i].type == 'checkbox'){
			listCheck[i].valeur = "je vaux : " + i ;
			listCheck[i].onclick = function(){alert(this.valeur)};
		}
	}
</script>

fais un copier coller de ce code dans une page ;)
tu seras en bonne voie pour comprendre ton problème

14/11/2008, 17h15
speedev

Je comprends bien ton code mais il ne me sert à rien.
J'emploie cette méthode sur d'autres dév mais ce n'est pas le cas ici.
14/11/2008, 17h19
le_chomeur
c'est un exemple pour te montrer que l'erreur ne vient pas de l'assignation de l'évènement mais du code plus haut ...

1 chose a vérifier : que ton objet existe bien :
Code:

1 2 3 4 function addEvent(objid,ev,fnc,capt){ var obj = document.getElementById(objid); alert(obj); ...
si oui , le problème viendra de la méthode addevent :)
14/11/2008, 17h20
speedev

J'ai bien vérifié l'existence des objets.
J'ai fais plusieurs debugs....
14/11/2008, 17h23
speedev

Je pense plutôt à l'utilisation de addEventListener qui a ses spécificités.
Je sais qu'il écrase les doublons sur des événements de target et type identiques.

Seulement je ne sais plus à quel niveau il faut intervenir pour que l'assignation de l'événement comme tu dis ne se fasse pas sur la dernière itération uniquement mais sur chacune.
14/11/2008, 17h30
marcha

Observes-tu le même problème sur IE et FireFox ?

Vois-tu qq chose dans la console de FireBug ?
14/11/2008, 17h32
speedev

Tout à fait, le pb est identique sur Internet explorer et je présume sur les autres navigateurs.

Concernant firebug je ne sais pas où regarder pour vérifier les événements.
14/11/2008, 17h40
marcha

Et tes boutons radio dans tout ça ? tu les crées comment ?
14/11/2008, 18h32
speedev

Je génère les boutons radios avec innerHTML.
J'ai vérifié le code source dans le navigateur, les radios ont bien tous des "id" différents nommés avec les "code" respectifs du flux XML.
Ils ont tous un "name" identique et des valeurs différentes.

De ce côté pas de pb...
14/11/2008, 22h35
marcha

Est-ce que tu peux poster un code minimal qui pose le problème et
que l'on puisse tester ?

Ok, en 2 fichiers...

Code pour test.xml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<?xml version="1.0" encoding="utf-8"?>
<LISTE>
	<OBJET>
		<CODE>1</CODE>
		<VALEUR>TOTO</VALEUR>
	</OBJET>
	<OBJET>
		<CODE>2</CODE>
		<VALEUR>TITI</VALEUR>
	</OBJET>
</LISTE>

Code pour test.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<html>
<head>
<script>
function loadXML(){
	if (document.implementation && document.implementation.createDocument) {
		var xmldoc=document.implementation.createDocument("","",null);
		xmldoc.load("/test.xml");
	} else if (window.ActiveXObject) {
		var xmldoc=new ActiveXObject("Microsoft.XMLDOM");
		xmldoc.load("/test.xml");
	}
	test_xml(xmldoc);
}
 
function test_xml(obj)
{
	var liste = document.getElementById("conteneur");
	liste.innerHTML = "";
	var t_con = obj.getElementsByTagName('LISTE');
	alert("debut parcours");
	if (t_con.length>0)
	{
		for(i=0;i<t_con[0].childNodes.length;i++)
		{	
 
			var code				= "";
			var valeur				= "";		
			var node = t_con[0].childNodes[i];
			if (node.nodeType == 1)
			{
				if(node.firstChild)
				{
					switch(node.nodeName)
					{
						case "OBJET" :
									alert("1 OBJET rencontré...création de son radio");
									for(j=0;j<node.childNodes.length;j++)
									{
										var enfant = node.childNodes[j];
										if (enfant.nodeType == 1)
										{
											if(enfant.firstChild)
											{
												switch(enfant.nodeName)
												{
													case "CODE" :			code		 		= enfant.firstChild.nodeValue;break;
													case "VALEUR" : 		valeur		 		= enfant.firstChild.nodeValue;break;
												}
											}
										}			
									}
									liste.innerHTML+="<input type=\"radio\" name=\"chp_radio\" id=\"chp_num_"+code+"\" value=\""+code+"\" /> : "+code+" ("+valeur+")<br />";
									document.getElementById("chp_num_"+code).valeur = valeur;
									addEvent("chp_num_"+code,"click", function () {
										alert("passage dans événement OK...exécution...");
										document.getElementById("valeur").innerHTML = "pause...";
										document.getElementById("valeur").innerHTML = this.valeur;
									}, false);
 
									alert("Le bouton radio se voit affecter la valeur : "+document.getElementById("chp_num_"+code).value+"\n"+"Le bouton radio se voit affecter un événement \"onclick\" devant afficher la valeur : "+valeur);
 
						break;
					}
				}
			}								
		}	
	}
}
 
function addEvent(objid,ev,fnc,capt){
	alert("Ajout d'un événement sur "+objid);
	var obj = document.getElementById(objid);
	if(obj.addEventListener)
	{
		obj.addEventListener(ev, fnc, capt);
	}
	else if(obj.attachEvent)
	{
		obj.attachEvent(
			'on'+ev,
			function()
			{
				return fnc.apply(obj, arguments);
			}
		);
	}
	else
	{
		if(!obj['on'+ev])
		{
			obj['on'+ev] = fnc;
		}
		else
		{	
			var oldfnc = obj['on'+ev];
			obj['on'+ev] = function(){
				oldfnc();
				fnc();
			}
		}
	}
	return true;
}
</script>
</head>
<body>
	<div id="conteneur"></div>
	valeur : <span id="valeur"></span>
	<script>loadXML();</script>
</body>
</html>

Il suffit d'exécuter test.html sur racine (ou changer les chemins du fichier xml dans la fonction LoadXML).

J'ai testé ce code sur Mozilla (3.0.3) uniquement.

Le problème rencontré est bien présent avec code : seul le dernier bouton radio créé dispose d'un événement onclick.

J'ai toujours l'impression que les affectations d'événements s'auto-écrase nt jusqu'au dernier mais je ne trouve pas d'explications.

Merci...

17/11/2008, 10h06
speedev

J'ai rajouté des alertes pour debug
18/11/2008, 11h08
speedev

Encore cette matinée sur le problème.
Je ne comprends pas du tout où ça bloque, tous mes IDs existent quand il le faut mais le addEventListener n'est toujours affecté que sur le dernier élément radio créé.

J'ai testé qlq closures javascript mais elles n'arrangent rien.

Je reste à votre écoute si vous pouvez m'aider, en attendant je passe à autre chose, ça fait 2 jours perdus déjà...

Voir 40 message(s) de cette discussion en une page