bind() et boucle for [Résolu]

[FrankOVD]

Bonjour,

J'ai créé une boucle qui sert à créer des items de menu. La structure du menu est inscrire dans un objet appelé "data" qui contient pour chaque item de l'information donc "clic" qui indique le code à exécuter sur l'évènement "click".

Voici l'extrait de mon code qui pose problème :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	for(i in data) {
		var id = "mnu"+i;
		var menubtn = $("<a>");
		$(menubtn).addClass("v3_menubtn");
		$(menubtn).css({"width":btn_width+"px"});
		$(menubtn).attr({"id":id,"title":data[i].title,"href":"javascript:void(0);"});
		var menuimg = $("<img>");
		$(menuimg).attr({"src":data[i].img,"border":"0"});
		$(menubtn).append(menuimg, "<br />", data[i].label);
		$(menubar).append(menubtn);
		$("#"+id).bind("click", function(e) { eval(data[i].clic); }); //ICI!!!
		delete(menubtn);
		delete(menuimg);
	}

Tout fonctionne très bien et chaque bouton se voit vraiment attibuer un code différent mais à chaque tour dans la boucle, la fonction bind() vient appliquer le comportement à tous les boutons déjà en place à chaque fois. Comme vous le vopyez, j'ai tenté de fonctionner avec un ID mais rien à faire. Quelqu'un pourrait m'aider?

[FrankOVD]

Voici un source facile pour constater mon problème

Code :

1
2
3
4
5
6
7
8
9
10
11
function test() {
	var a = new Array("alert(1)", "alert(2)", "alert(3)", "alert(4)", "alert(5)");
	for(i in a) {
		var o = $("<a>");
		$(o).html("TEST #"+i);
		$(o).attr({"href":"javascript:void();","target":"_self"});
		$(o).bind("click", function(e) { alert(i); });
		$("#thediv").append(o).append("<br />");
		delete(o);
	}
}

Vous constaterez que le fait de cliquer sur n'importe quel lien affiche le chiffre 4.

Ma théorie, c'est que l'instruction alert() n'est appelé que lorsque je clique et que la valeur de i à ce moment est restée comme à la fin de la boucle. Mais comment alors inscrire la valeur de la variable i dans l'instruction bind()?

[FrankOVD]

Voici donc la solution temporaire que j'ai trouvé. Je dis temporaire car je trouve ça très laid et j'aimerais pouvoir en arriver à une solution moins bizarre :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
for(i in data) {
	var id = "mnu"+i;
	var menubtn = $("<a>");
	$(menubtn).addClass("v3_menubtn");
	$(menubtn).css({"width":btn_width+"px"});
	$(menubtn).attr({"id":id,"title":data[i].title,"href":"javascript:void(0);"});
	$(menubtn).data("clic", data[i].clic); //Place la valeur dans les données de l'objet
	$(menubtn).bind("click", function(e) { eval($(this).data("clic")); }); //Utilise cette donnée lors de l'événement
	var menuimg = $("<img>");
	$(menuimg).attr({"src":data[i].img,"border":"0"});
	$(menubtn).append(menuimg, "<br />", data[i].label);
	$(menubar).append(menubtn);
}

N'hésitez pas à proposer mieux!