Discussion :

[Fractaliste]

Bonjour,

Je travaille sur un système d'arbre généalogique, il s'agit donc d'un certain nombre de div que j'imbrique. De manière très simpliste mon code de base HTML est le suivant :

Code html :

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

1
2
3
<div>
	<img src="" id="id1"/>
</div>

Chaque niveau de mon arbre contient donc un bloc DIV ainsi qu'une image. Quand je clique sur cette image j'envoie la requête AJAX suivante qui remplace le contenu de mon DIV par la réponse qui n'est rien d'autre que le niveau suivant de mon arbre.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
(function($) {
   $("[id^='id']").click(function(){
     var monid=$(this).attr('id').replace("id","");
     var data = {	d1: 123,
			d2: 456
			id: monid	};
 
	$.post(ajaxurl, data, function(reponse) {
		$('#'+monid).html(reponse);
    	});     
   });
})(jQuery);

Le résultat HTML est donc le suivant :

Code html :

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

1
2
3
4
5
6
<div>
	<img src="" id="id1"/>
	<div>
		<img src="" id="id11"/>
	</div>
</div>

Donc jusque là ça marche très bien. Mon problème est pour l'étape suivante où je clique sur l'image ayant pour id la chaîne de caractère "id11". Et rien ne se passe alors que mon sélecteur JQuery

Code :

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

$("[id^='id']").click(function(){});

devrait le reconnaître sauf erreur de ma part ?

Merci d'avance,
Raphaël N.

[DJ Caësar 9114]

Utilise "on" au lieu de click!
http://api.jquery.com/on/

edit: essaye

Code :

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

 $("[id^='id']").on("click", function(){

[Fractaliste]

Utilise "on" au lieu de click!

Testé et même problème. Ca marche très bien au premier niveau, les clics sur le second niveau ne sont pas détectés.

Comme le second niveau est chargé via Ajax, il faut peut-être que je rédéclare mon event ?

[DJ Caësar 9114]

La solution la plus "simple" (comprendre celle qui fonctionnera à coup sûr mais qui n'est pas la plus courte) c'est de faire un callback.
Ta fonction callback c'est ce qu'il y a dans ton "click" (tu l'externalises donc avant), et tu fais un appel récursif à l'intérieur après ton appel ajax, avant de fermer le $.post.

[Bovino]

Lorsque tu déclares ton événement, il ne peut bien évidemment pas affecter des éléments qui n'existent pas...
Il faut donc utiliser la délégation d'événements :

Code :

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

$('div_englobante').on('click', '[id^=id]', function(){...});

[Fractaliste]

Yep c'était bien un problème d'évènement en fin de compte. Et la délégation d'évènement règle le soucis.

Merci à vous deux Cesar et Bovino !