Problème déclenchement fonction sur image créée à la volée

Salut @ tous !

J'ai ce script jQuery qui affiche une alerte lorsqu'on clique sur une des images d'une DIV :

$(document).ready(function()
    {
    $('#liste_photos_uploadees li a img').click(function()
        {
        alert('Test !');
        });
    });

Ce script fonctionne sur des images déjà présentent dans la DIV au chargement de la page, mais lorsque je créé des images à la volée le script ne fonctionne pas sur ces nouvelles images :

$('#liste_photos_uploadees').prepend('<li><img src="photos/photo_' + $.cookie('num_photo_uploadee') +'.jpg?q=' + new Date().getTime() + '" alt="Photo" /></li>');

Merci de m'aider...
Modifié par 6ber6ou (05 Dec 2011 - 10:24)

Bonjour,

Normal, je pense :
ton code gère un click sur une image dans un "a", lui même dans un "li" lui même dans l'élément "#liste_photos_uploadees".
Et la création à la volée créée des images dans un "li" dans l'élément "#liste_photos_uploadees".

donc dans ce cas, il ne fait rien du tout.

J'ai oublié la balise <a> dans le message, mais elle est bien présente dans mon code :

$('#liste_photos_uploadees').prepend('<li><a href="#" title="Choisir cette photo" onclick="return false;" /><img src="photos/photo_' + $.cookie('num_photo_uploadee') +'.jpg?q=' + new Date().getTime() + '" alt="Photo" /></li></a>');

Ca fonctionne (presque) correctement en ajountant l'évènement .on() (à partir de jQuery 1.7) dans mon code :

$('#liste_photos_uploadees').on('click', 'li a img', function()
    {
    alert('Test !');
    });

Le problème maintenant c'est que si j'ajoute une image et son lien dynamiquement alors que la liste est vide le script n'est pas déclenché.
Par contre si une image est présente dans la liste lorsque j'en créé une autre dynamiquement, là le script ce lance !
Modifié par 6ber6ou (07 Dec 2011 - 09:15)

Bonjour,

La méthode .click s'apparente à .bind('click', handler) ( http://api.jquery.com/click/ ).
Or comme spécifié dans la doc Jquery, .bind ( ou .click dans ton cas) ne fonctionne que sur des élements présents dans le DOM lors de la création du gestionnaire d’évènement.

Dans ton cas utiliser .live('click', handler) devrait régler le problème, en effet celui ci s'applique aussi aux éléments crées plus tard. J'ai pas testé avec ton code par contre , mais dans mes autres petits progs ça fonctionne comme ça