(jquery) click sur object Append(ed)

[Vape]

Bonjour !

Au click sur un bouton, j'append un div qui contient lui aussi un bouton. Jusqu'ici tout fonctionne.
Mais lorsque je souhaite faire exécuter une fonction au bouton contenu dans mon div appended, rien ne se passe, quelque soit la fonction que j'y insère.

Voici mon code :

Code: Tout sélectionner

$(document).ready(function() {$("#bouton_one").click(function() { 
      $(".gris").append('<div id="bouton_two"> <a  href="#"> <img src="img/bouton_invisible.png" /> </a></div>');                   
      $(this).unbind();   
      $(this).hide();
      $(".gris").css("padding-bottom","45px");                                                           
      $('body').css("backgroundImage","url(img/background_tagged.jpg)");
                                      });
           });


$(document).ready(function() {$("#bouton_two").click(function() {
                                     $('body').css("backgroundImage","url(img/background.jpg)");
                                     });
          });                                           
                        


Une idée ? Merciii d'avance

[Galdon]

C'est normal que ça ne fonctionne pas, c'est une erreur assez fréquente. A force d'utiliser jQuery et ses sélecteurs CSS, on a tendance à confondre le fonctionnement de CSS et de Javascript.

En CSS, quand tu déclare une règle, elle s'applique tout de suite et à tous les éléments, même ceux qui sont créés à la volée en javascript après le chargement de la page.

Mais en Javascript ça n'est pas le cas, quand tu sélectionne un élément avec jQuery et que tu lui attribue une fonction lors du clic par exemple, jQuery va sélectionner tous les éléments qui correspondent à ton sélecteur, et leur "accrocher" la fonction que tu veux exécuter lors de l'événement click.

Maintenant, si tu créé un nouvel élément qui correspond à ce sélecteur, ce nouvel élément ne va pas se voir attribuer ta fonction automatiquement, il faut "accrocher" cette fonction manuellement, comme je le fait ici dans ce code :

Code: Tout sélectionner

jQuery(document).ready(function(){
   $("#bouton_one").click(function(){
      $(".gris").append('<div id="bouton_two"> <a  href="#"> <img src="img/bouton_invisible.png" /> </a></div>');
      
      // Création du nouvel élément
      var nouvel_element = $('<div id="bouton_two"><a href="#"><img src="img/bouton_invisible.png" /></a></div>');
      
      // Attachement d'une fonction qui va réagir au clic dans le nouvel élément
      nouvel_element.click(function(){
         $('body').css("backgroundImage","url(img/background.jpg)");
      });
      
      // Ajout du nouvel élément dans la page web (DOM)
      $(".gris").append(nouvel_element);
      
      $(this).unbind();
      $(this).hide();
      $(".gris").css("padding-bottom","45px");
      $('body').css("backgroundImage","url(img/background_tagged.jpg)");
   });
});

[Vape]

Ah d'accord !!!
Ton explication a le mérite d'être claire, nette et précise. Thank you!