[Résolu] [jQuery] Propagation des événements avec la fonction live.

Bonjour à tous.

Voila mon problème. Je me sers de jQuery pour mettre à jour une carte de jeu, après récupération de données via une requête ajax. Une fois les données récupérées, je modifie la classe des div de ma carte. Cette mise à jour s'effectue lors d'un déplacement sur la carte, c'est à dire lors du clic de l'utilisateur sur une des flèches de déplacement affichées à l'écran.
Cependant une fois la mise à jour effectuée, les événements gérant les clics sur les flèches ne fonctionnent plus (sachant que le code html des flèches n'a lui pas été modifié). Après de nombreuses recherches sur de nombreux forums j'en suis arrivé à utiliser la fonction live pour gérer le clic. Cependant rien n'y fait, ça ne veut pas marcher! Étant à la base développeur en PHP, je viens vous demandez un peu de votre temps pour m'aider.

Voici le code html de la zone concernée :

<div class="map">
					
					<div class="emplacement unknown x0y0" id="x0y0"></div>
					
					<div class="emplacement unknown x0y1" id="x0y1"></div>
					
					<div class="emplacement unknown x0y2" id="x0y2"></div>
					
					<div class="emplacement unknown x0y3" id="x0y3"></div>

					
					<div class="emplacement unknown x0y4" id="x0y4"></div>
					
					<div class="emplacement unknown x1y0" id="x1y0"></div>
					
					<div class="emplacement unknown x1y1" id="x1y1"></div>
					
					<div class="emplacement unknown x1y2" id="x1y2"></div>
					
					<div class="emplacement unknown x1y3" id="x1y3"></div>
					
					<div class="emplacement unknown x1y4" id="x1y4"></div>
					
					<div class="emplacement unknown x2y0" id="x2y0"></div>
					
					<div class="emplacement waterGrassTopHorizontal x2y1" id="x2y1"></div>
					
					<div class="emplacement water x2y2" id="x2y2"></div>

					
					<div class="emplacement water x2y3" id="x2y3"></div>
					
					<div class="emplacement waterGrassBottomHorizontal x2y4" id="x2y4"></div>
					
					<div class="emplacement unknown x3y0" id="x3y0"></div>
					
					<div class="emplacement waterGrassRightTop x3y1" id="x3y1"></div>
					
					<div class="emplacement waterGrassRightVertical x3y2" id="x3y2"></div>
					
					<div class="emplacement waterGrassRightVertical x3y3" id="x3y3"></div>
					
					<div class="emplacement waterGrassRightBottom x3y4" id="x3y4"></div>
					
					<div class="emplacement unknown x4y0" id="x4y0"></div>
					
					<div class="emplacement unknown x4y1" id="x4y1"></div>

					
					<div class="emplacement grass x4y2" id="x4y2"></div>
					
					<div class="emplacement unknown x4y3" id="x4y3"></div>
					
					<div class="emplacement unknown x4y4" id="x4y4"></div>
					
				</div>
				<p>Je teste</p>
				<div class="arrowTop"></div>
				<div class="arrowBottom"></div>
				<div class="arrowRight"></div>

				<div class="arrowLeft"></div>

Et voici mon code javascript (je ne mets que pour la flèche du haut) :

$('.arrowTop').live('click',
		function(){
				$.ajax(
					{
					   url: "map.php?x=50&y=41",
					   dataType: "xml",
					   cache: false,
					   success: function(xml){
							$.types = $(xml).find('return').text().split(',');
														
							$('#x0y0').removeClass().addClass('emplacement '+$.types[0]+' x0y0');
							$('#x0y1').removeClass().addClass('emplacement '+$.types[1]+' x0y1');
							$('#x0y2').removeClass().addClass('emplacement '+$.types[2]+' x0y2');
							$('#x0y3').removeClass().addClass('emplacement '+$.types[3]+' x0y3');
							$('#x0y4').removeClass().addClass('emplacement '+$.types[4]+' x0y4');
							$('#x1y0').removeClass().addClass('emplacement '+$.types[5]+' x1y0');
							$('#x1y1').removeClass().addClass('emplacement '+$.types[6]+' x1y1');
							$('#x1y2').removeClass().addClass('emplacement '+$.types[7]+' x1y2');
							$('#x1y3').removeClass().addClass('emplacement '+$.types[8]+' x1y3');
							$('#x1y4').removeClass().addClass('emplacement '+$.types[9]+' x1y4');
							$('#x2y0').removeClass().addClass('emplacement '+$.types[10]+' x2y0');
							$('#x2y1').removeClass().addClass('emplacement '+$.types[11]+' x2y1');
							$('#x2y2').removeClass().addClass('emplacement '+$.types[12]+' x2y2');
							$('#x2y3').removeClass().addClass('emplacement '+$.types[13]+' x2y3');
							$('#x2y4').removeClass().addClass('emplacement '+$.types[14]+' x2y4');
							$('#x3y0').removeClass().addClass('emplacement '+$.types[15]+' x3y0');
							$('#x3y1').removeClass().addClass('emplacement '+$.types[16]+' x3y1');
							$('#x3y2').removeClass().addClass('emplacement '+$.types[17]+' x3y2');
							$('#x3y3').removeClass().addClass('emplacement '+$.types[18]+' x3y3');
							$('#x3y4').removeClass().addClass('emplacement '+$.types[19]+' x3y4');
							$('#x4y0').removeClass().addClass('emplacement '+$.types[20]+' x4y0');
							$('#x4y1').removeClass().addClass('emplacement '+$.types[21]+' x4y1');
							$('#x4y2').removeClass().addClass('emplacement '+$.types[22]+' x4y2');
							$('#x4y3').removeClass().addClass('emplacement '+$.types[23]+' x4y3');
							$('#x4y4').removeClass().addClass('emplacement '+$.types[24]+' x4y4');
						}
					}
				);
				return false;
			}
		);

Les coordonnées x et y sont mise au hasard pour les test.

Je vous remercie d'avance pour votre aide.
Modifié par squems (08 May 2009 - 15:02)

Salut squems,

On pourrait voir fonctionner ça en ligne ?

Non désolé j'ai rien en ligne. Mais en gros tu as la carte avec à droite les 4 flèches pour se déplacer. Je clique sur celle du haut, la carte se déplace mais si je re-clique plus rien ne marche, les événements ne marche plus.

C'est normal que tes coordonnées x et y soient toujours les mêmes?

url: "map.php?x=50&y=41",

Ici à chaque clic tu garde les même coordonnées.
Je crois comprendre que tu a des fonctions d'event similaire pour chaque flèche, peut être un copier coller et un oublie de changer les coordonnées

Non non le problème ne vient pas de là, j'ai mis des coordonnées spécifiques pour la flèche du haut et d'autres pour la flèche du bas afin de tester si la navigation fonctionnait. Mais lorsque je clique sur la flèche du haut, les nouvelles coordonnées se chargent bien, mais ensuite l'événement de la flèche du bas ne fonctionne plus.

Bon j'ai réussi finalement à résoudre mon problème.
Cela semblait provenir de la lecture du fichier XML. En effet ma variable $.data posait problème. Je l'ai donc renommée. Ce nom doit être utilisé dans jQuery d'où l'erreur.

Merci à vous

squems a écrit :
En effet ma variable $.data posait problème. (...) Ce nom doit être utilisé dans jQuery d'où l'erreur.

En effet: http://docs.jquery.com/Internals/jQuery.data

squems a écrit :
Je l'ai donc renommée.

C'est celle-ci que tu as renommée en $.types? Auquel cas ça reste une bêtise.

jQuery définit $ comme alias de l'object jQuery. Si tu déclares un $.trucmuche, tu rajoutes une propriété ou une méthode jQuery.trucmuche, ce qui n'est pas très propre. Rien n'empêche les développeurs de définir leur propre propriété ou méthode jQuery.trucmuche lors d'une évolution future, et dans ce cas tu la remplaces, ce qui peut poser quantité de problèmes.

Si tu veux un nom de variable, utilise trucmuche, ou $trucmuche, mais certainement pas $.trucmuche.

D'accord, merci à toi! Je vais tenir compte de ta remarque et vais modifier mon code en conséquence.