Bonjour,

J'ai un problème pour attribuer dynamiquement un évènement onClick sur un noeud créé lui aussi dynamiquement.

Voici le code :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
function expand(id,type)
{
	var xhr = getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function()
	{
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			var resp = xhr.responseText;
			
			var tabResult;
			//IL FAUT EVALUER LE RESP !!
			alert(resp);
			eval(resp);
			
			if (tabResult.length > 0)
			{
				//On ajoute un noeud de liste
				var newUl = document.createElement("menu");
				newUl.id = "ul-"+id;
				newUl.style.listStyleType = 'none';
				//Pour chaque sous-élément, on ajoute un élément à la liste
				for(i=0;i<tabResult.length;i++)
				{
					var newLi = document.createElement("li");
					newLi.id = id+"-typ."+tabResult[i][0];
					var liText = document.createTextNode(" "+tabResult[i][1]);
					//Si on est pas au dernier niveau; on affiche un 'plus' devant l'item
					if (type == 'projet')
					{
						var plus = document.createElement("img");
						plus.src = "../res/exp_plus.gif";
						plus.onClick = expand(newLi.id,"type_veh");
						newLi.appendChild(plus);
					}
					newLi.appendChild(liText);
					newUl.appendChild(newLi);
				}
				var loc = document.getElementById(id);
				alert(newUl.id);
				loc.appendChild(newUl);
				//On change le 'plus' en 'moins'
				var moins = document.createElement("img");
				moins.src = "../res/exp_minus.gif";
				loc.replaceChild(moins,loc.firstChild);
				loc.firstChild.onClick = collapse(loc.id);
			}
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxArbo.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	alert("id="+id+"&type="+type);
	xhr.send("id="+id+"&type="+type);
}
voici le bout de code ou j'affiche mon premier niveau de la liste, au chargement de la page :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
<?php
        $query = "SELECT id_proj,projet FROM projets ORDER BY projet";
        $result = mysql_query($query);
        
        echo "<menu id='main' name='main' style=\"list-style-type:none\">";
        while ($tab = mysql_fetch_array($result))
        {
                echo "<li id='proj.".$tab['id_proj']."'><img src='../res/exp_plus.gif' alt='plus' onClick='expand(\"proj.".$tab['id_proj']."\",\"projet\")'/> ".$tab['projet']."</li>";
        }
        echo "</menu>";
?>
J'arrive bien à passer les paramètres en utilisant des variables locales de la fonction qui créé les noeuds, mais les fonctions associées aux onClick sont directement exécutées.
En clair, quand je clique sur mon 'plus' pour dérouler un niveau, il se referme aussitôt..

J'ai essayé de déclarer mes onclick de cette façon :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
plus.onClick = function () {expand(newLi.id,"type_veh");};
mais ça ne fonctionne pas...

En bref, j'aimerais savoir pourquoi mes fonctions attribuées aux onClick sont exécutées directement, et si vous avez une solution pour y remédier.

Merci