Selection d'un élément qui a été crée par JQuery

Sujet résolu

22 février 2018 à 15:23:35

Bonjour a tous, je fais le TP du cours, il faut créer un formulaire via JQuery mais il y a un hic : JQuery ne reconnait jamais les éléments HTML qui ont été crées par lui même, je vous montre le code :

    $(function() {

      $('#label').click(function(){
      //desolé je suis obligé de le faire en une seule ligne sinon jquery me rajoute </div> tout seul....
      $('#droite').append('<div id="insert"><hr>Texte du label <input type="text" name="label2"><button id="validlabel">Ok</button></div>');
 
      });
   
  $('#validlabel').click(function(){
  alert('woo');
  });

etc etc

Si je fais un bouton id=validlabel déja présent dans le code HTML, aucun problème, mais celui crée avec Jquery ne se déclenche jamais !

Que faire ? bien embetant pour créer du contenu avec Jquery

Merci de votre aide !

Romsteack

22 février 2018 à 16:18:48

Salut !

Je pense que c'est parce que tu ne modifie pas le dom en direct ici, tu ajoute du texte qui est ensuite interprêté. essai d'utiliser createElement() et appendChild()

D'un seul Homme il vaut mieux se méfier, à deux ils ont pu comploter, trois est le chiffre auquel on peux se fier

Lenzydo

22 février 2018 à 17:52:27

Desolé, ca marche pas mieux on dirait :/

Romsteack

22 février 2018 à 19:02:54

Donne moi ton code en entier =)

D'un seul Homme il vaut mieux se méfier, à deux ils ont pu comploter, trois est le chiffre auquel on peux se fier

Lenzydo

23 février 2018 à 8:29:31

Tiens voila : )

<!DOCTYPE html>
<html>
  <head>
    <!---<meta charset="UTF-8">--->
    <style>
      body {
        margin: 0;
      }
      #gauche {
        float: left;
        width: 70%;
        height: 1000px;
        background-color: #EFECCA;
      }
      #droite {
        background-color: #CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 71%;
      }
    </style>
  </head>
  <body>
    <div id="gauche">
    </div>
    <div id="droite">
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button id="label">Label</button>
      <button id="zone">Zone de texte</button>
      <button id="bouton">Bouton</button>
	  <div id="aaa">
	  </div>
	  <div id="cachemisere">
	  <button id="validlabel">Label</button>
      <button id="validzone">Zone de texte</button>
      <button id="validbouton">Bouton</button>
	  </div>
    </div>
	
	
	
	 <script src="jquery.js"></script>
	 <script>
	  $(function() {
$("#cachemisere").hide();
	  $('#label').click(function(){
	  //desolé je suis obligé de le faire en une seule ligne sinon jquery me rajoute </div> tout seul....
	  var p = document.createElement('<div id="insert"><hr>Texte du label <input type="text" name="label2"><button id="validlabel">Ok</button></div>');
document.body.appendChild(p);
	 //$('#aaa').append($(''));
	 /* $('#droite').append('<hr>');
	  $('#droite').append('Texte du label '); 
	  $('#droite').append('<input type="text">'); 
	  $('#droite').append('<input type="submit" value="ok">'); 
	  $('#droite').append('</div>'); */
	  
	  /*$("#insertdroite" ).html("");*/
	  });

	  $('button').click(function(){
  //alert('woo');
  });  
	
  $('#validlabel').click(function(){
  alert('woo');
  });
	  
	  $('#zone').click(function(){
	  //$('#insert').hide();
	 $('#droite').append('<div id="insert"><hr>id de la zone de texte <input type="text" name="zonetext"><input type="submit" value="ok"></div>');
	  });
	  
      });
	 </script>
  </body>
</html>

Krogoth

23 février 2018 à 8:57:50

Hello,

Quand tu positionne ton listener click sur validlabel il n'existe pas encore.

Pour contourner ce soucis tu vas positionner ton listener sur un élément parent ici #droite et donné le selecteur que tu souhaite cibler.

Ce qui va donner quelque chose du genre:

$('#droite').on('click', '#validlabel', function(){
    alert('woo');
});

Si je ne me trompe pas en js natif ca va donner:

document.getElementById('droite').addEventListener('click', function(event){
    if(event.target.id == 'validlabel'){
        alert('woo');
    }
})

Qui peut aider a comprendre ce qui se passe

-
Edité par Krogoth 23 février 2018 à 9:00:16

Un petit +1 si je vous ai aidé est toujours appréciable :).

Lenzydo

23 février 2018 à 10:37:29

Merci pour ton aide cependant encore le meme probleme une fois dans le bloc :

   $('#droite').on('click', '#validlabel', function(){
    //alert('woo');
    $('#gauche').append($('#label2').val());
	alert($('#label2').val());
	$('#validlabel').hide();
	});

il ne reconnait pas #label2 donc c'est du undefined.
Il peut pas mettre a jour le DOM a chaque fois Jquery plutot que d'avoir a faire des contorsion comme ca a chaque fois

Lenzydo

26 février 2018 à 11:44:42

Personne n'a d'idée ?

Krogoth

26 février 2018 à 11:58:50

label2 est un name, pas un id....

Un petit +1 si je vous ai aidé est toujours appréciable :).