(jquery) click sur object Append(ed)

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
Vape
 
Messages: 2
Inscription: 27 Aoû 2013, 11:43

(jquery) click sur object Append(ed)

Messagede Vape » 27 Aoû 2013, 11:56

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. :evil:

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

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: (jquery) click sur object Append(ed)

Messagede Galdon » 28 Aoû 2013, 22:36

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)");
   });
});
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol

Vape
 
Messages: 2
Inscription: 27 Aoû 2013, 11:43

Re: (jquery) click sur object Append(ed)

Messagede Vape » 29 Aoû 2013, 10:53

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


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité