Discussion :

[hervecsid]

Bonjour,

je vais essayer d'être clair pour mon premier message ici :
Situation générale :
Je suis en train de developper une fenêtre modale qui permettra soit de sélectionner une image dans une liste d'image déjà ajoutées à la base soit (en dessous de la liste) d'uploader une image qui sera ajoutée à la base d'images et, via jquery ajoutée dans la liste précédemment décrite.

L'upload fonctionne
L'ajout à la liste fonctionne
La sélection d'une image fonctionne (si on clique sur une image de la liste tout se passe normalement je récupère les infos de l'image pour le formulaire qui a affiché la fenêtre modale)

Ce qui ne fonstionne pas :
Lorsque j'upload une image et qu'elle est ajoutée dynamiquement à ma liste, si je clique dessus, l'évènement "click" de jquery ne se déclenche pas! Alors que toutes les autres images déclenchent bien.

Les images sont de la forme :

Code :

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

1
2
3
4
5
6
 
<div class="col-sm-12" id="liste_medias">
    ...
    <img class="image-liste-medias" id="image53" src=".../medias/53-blabla-thumb.jpg" title="53 -> blabla.jpg " height="120px" width="120px">
    ...
</div>

La fonction qui ajoute l'image à ma liste :

Code :

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

1
2
3
4
5
 
function maj_liste_medias(){
	contenu='<img class="image-liste-medias" id="image'+id_media+'" src="'+url_thumb+'" height="120px" width="120px"  title="'+id_media+' -> ">';
	$('#liste_medias').append(contenu);
};

Si je consulte le DOM l'image est bien là avec les bonnes informations.

Le déclenchement du clic se fait sur la class CSS image-liste-medias :

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
 
//--clic sur un media affiché
	$('.image-liste-medias').click(function(){
		id_media= $(this).attr('id').substring(5);
		//--recupération par ajax des infos du fichier cliqué
		$.ajax({
			url: "<?echo _REP_MODULES_;?>uploadmedia/ajax_infos_media.php", 
			type: "GET",
			data: 'id_media=' +id_media,
			contentType: false,
			cache: false,
			processData:false,
			dataType: 'json',
			success: function(json)
			{
 
				if (json.status==='ok'){
					//$('#loading').hide();
					//$('#ok').show();
					var message	= json.message;
					id_media = json.id_media;		//-- recupère id du media
					fic_media= json.le_fichier;		//-- récupère nom du fichier media
					url_thumb= json.url_thumb;		//-- récupère url complete du thumb du media
					url_media= json.url_media;		//-- récupère url complete du media haute def
					recup_donnees();				//-- transfère les données aux champsdu formulaire
				}else{
					$('#loading').hide();
					$('#nok').show();
					$("#message").html(json.message);
				}
 
			}
		});
	});
});

Bref lorsque l'image est ajoutée à ma liste la fonction click n'est pas déclenchée....

Je ne comprends pas pourquoi

Tout est fini sauf ce bug.....

[EddiGordo]

J'ai l'impression que dans ton code :

Code :

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

1
2
3
4
5
 
function maj_liste_medias(){
	contenu='<img class="image-liste-medias" id="image'+id_media+'" src="'+url_thumb+'" height="120px" width="120px"  title="'+id_media+' -> ">';
	$('#liste_medias').append(contenu);
};

ta variable "id_media" n'existe pas et est donc vide.
Ta nouvelle image dois donc avoir "image" comme valeur d'id et c'est pour cela que ton script ne la retrouve pas.

[hervecsid]

Non. Sauf grosse erreur de ma part.
- dans mon DOM l'image a bien comme id "imageXX"
- mais surtout jquery utilise la classe et non l'id :

Code :

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

    $('.image-liste-medias').click(function(){ ....

Et si dans la fonction click je mets un alert('blablabla'); en premiere ligne il ne se déclenche pas si je clique sur l'image ajoutée par jquery alors qu'il se déclenche bien si je clique sur une image préalablement chargée.

Tout se passe comme si Jquery ne voyait pas le DOM à jour mais celui de fin de chargement de la page seulement.....

Comme je n'ai pas une très très grande expérience de l'utilisation de jquery je pense qu'il y a une subtilité qui m'échappe...

[EddiGordo]

Je veux bien moi mais je vois deux choses.
1) ton évènement n'est pas déclenché sur les nouvelles images et ça c'est normal puisque celles-ci n'existaient pas au moment de la pose de l'écouteur. En jQuery, la syntaxe $(truc) est juste un sélecteur qui "ramasse" dans le dom ce qui existe à l'instant où la ligne est exécutée, et rien d'autre.
2) si l'id ajouté dynamiquement n'est pas bon, cela ne pourra pas fonctionner au moment de l'appel ajax puisqu'il est censé le passer au service appelé. Dans ton exemple, les images du DOM sont correctes, d'accord, mais celles ajoutées par ta fonction me semblent douteuses.

Pour résoudre ton problème d’événement, il faut poser ton écouteur (le .click) une fois terminée la procédure d'ajout des images.

A mon avis, la méthode plus généralement appropriée en jQuery est "on" :

Code :

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

1
2
3
4
5
 
//au lieu de 
$('.image-liste-medias').click(function(){ 
//utilise plutôt
$('.image-liste-medias').on ('click', function(){

Si tu ne peux pas le faire simplement ou si tu dois poser ton écouteur en plusieurs fois, tu peux neutraliser les précédentes poses par :

Code :

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

1
2
3
4
 
$('.image-liste-medias').off('click')
//que tu peux chainer d'ailleurs en 
$('.image-liste-medias').off('click').on('click', function () {....

Si tu ne veux pas gérer des écouteurs dynamiquement tu peux aussi changer de technique, en posant un écouteur sur le conteneur de tes images :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('#liste_medias')
	.on (
		'click',
		function (e)
		{
                        var clickedObject = e.target;
			if (clickedObject.localName == 'img')
			{
				... ton appel ajax etc...
			};
		}
	);

comme ça, quel que soit le nombre d'images à l'intérieur du conteneur ça roule avec un seul écouteur...

[SpaceFrog]

la solution pass en effet par on() par délégation depuis un parent ou par delegate().

[Toufik83]

essaie

Code :

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

1
2
3
4
 
$("#liste_medias").on("click",".image-liste-medias",function(){
  alert($(this).attr("src"));
  });

[hervecsid]

Merci pour toutes ces réponses !
Je pense que la réponse à mon problème se trouve là :

...
1) ton évènement n'est pas déclenché sur les nouvelles images et ça c'est normal puisque celles-ci n'existaient pas au moment de la pose de l'écouteur. En jQuery, la syntaxe $(truc) est juste un sélecteur qui "ramasse" dans le dom ce qui existe à l'instant où la ligne est exécutée, et rien d'autre.
...

Je regarde tout ça plus tard dans la journée car j'ai des rendez-vous avant ...

Je reviendrai vous donner la réponse/solution mais je suis confiant!

Merci!

[hervecsid]

Bonjour!

Merci à tous!
Vos réponses m'ont bien éclairé sur certaines subtilités.
Je confirme donc que cela fonctionne parfaitement avec :

Code :

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

1
2
3
4
 
	$("#liste_medias").on("click",".image-liste-medias",function(){
		...
	});

Merci de votre aide.