$('#madiv').html et événements

Bonjour à tous,

je rencontre un problème qui a certainement une solution.
je me sers d'un jquery pour changer l'état d'un bouton avec ce code :

Code:

---

$('#croix').html('<div id="suppr" style="cursor : pointer;"><img src="../picto-admin-supprimer-photo.png" alt="supprimer la photo" /></div>');

---

donc sur ma fonction le change une div et la remplace par ce code HTML

Puis j'ai une bout de code qui écoute #suppr qui fait ca :

Code:

---

$('#suppr').click(function() {$('#retour_photo_1').attr('style', 'background:#ff6600;');});

---

et rien ne se passe quand je clique sur ma div #suppr... ce qui est plus étrange, c'est que si j'écris directement dans mon html le code ci dessous, cela marche parfaitement.

Code:

---

<div id="suppr" style="cursor : pointer;"><img src="../picto-admin-supprimer-photo.png" alt="supprimer la photo" /></div>

---

Pourquoi Est-ce que lorsque c'est jquery qui l'écrit ca ne fonctionne pas ?
J'ai vérifié le code généré et il me parait bon.

Vous avez une idée ?

C'est juste une question de logique : aucun langage de programmation ne fait de divination !
Affecter un gestionnaire d'événement à un élément qui n'existe pas, ça ne sert à rien et ça ne fait rien. Et le fait que tu ajoutes l'élément plus tard dans le code n'y change rien : si au moment de déclarer le gestionnaire l'élément n'est pas présent, ton code ne fait rien.

Il existe plusieurs techniques pour pallier cela : affecte le gestionnaire après avoir ajouté l'élément ou utiliser la délégation d'événement (décrit dans la doc de la fonction .on()).

merci Bovino,

ton aide m'a été précieuse... je n'avais pas pensé à ca, je suis plutôt PHP que JS :aie:
Du coup, j'ai modifié légèrement le code et surtout j'ai chargé la div (vide) dès le lancement de la page et tout marche correctement maintenant.

Merci encore

Bonjour,

C'est typiquement un d'utilisation de .on() avec délégation il me semble ...

Code:

---

1 2	$('#croix').on('click', '#suppr', function() {$('#retour_photo_1').attr('style', 'background:#ff6600;');});

---

merci devyan pour ce bout de code, je vais essayer de le mettre en place pour comprendre la notion de délégation

a priori promise() pourrait aussi être utile...