Déclencher une fonction au click sur un bouton créé dynamiquement

**new_wave** · 23/01/2017, 10h28

Bonjour,

Pouvez-vous me dire comment faire pour que se déclenche une fonction après click sur un bouton crée génériquement.
En effet, je constate qu'une fonction se déclenche correctement après un click sur un bouton non crée génériquement.

Par contre cela ne fonctionne pas si le bouton est crée génériquement.

Voici le code de la page html et le code jquery associé.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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: 300px;
        padding: 10px;
        padding-left: 70%;
                text-align:justify;
      }
          
           #en-dessous {
        background-color:#CEFFF8;
        height: 1000px;
        padding : 10px;
        padding-left: 70%;
                text-align:justify;
      }
          
                #right {
                position: absolute;
                width: 70%;
                border: 2px solid #000000;
                
                }
          
    </style>
  </head>
  <body>
    <div id="gauche">
	<span id="recup_texte_btn_ok" value="" ></span>
	</div>
 
	<div id="droite">
 
      Utilisez ces boutons pour créer votre formulaire<br><br>
      <button onclick= "afficher_label_ZT_btn_ok()" id="id_bouton_label">Label</button><br><br>
      <button onclick= "afficher_zone_texte()" id="id_bouton_zone_texte">Zone de texte</button><br><br>
      <button onclick= "afficher_bouton()"id="id_bouton" >Bouton</button><br><br>
 
	</div>
 
	<div id="en-dessous">
 
		<!--<hr id="right" /><br><br>
		Texte du label<br><br>
		<input type = "text" id = "id_texte_btn_ok" name = "texte_btn_ok" value="Nom"/>
		<button onclick="afficher_texte_div_gauche()">OK</button>-->
 
 
	</div>
 
	<script src= "jquery.js"></script>
	<script src="fonctions_jq_generateur_formulaire.js"></script>
	<!--ajout d'un bibliothèque de gestion des espaces -->
	<script src="jquery.empty-or-whitespace.js"></script>
  </body>
</html>

voici le code Jquery associé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$(function(){
 
 
	//appel de la fonction d'affichage_ligne_label_zone_texte après un click sur le bouton d'id = id_bouton_label
	$('#id_bouton_label').click(affichage_ligne_label_zone_texte);	
 
	//appel de la fonction d'affichage du texte saisi dans le span de gauche
	$('#id_btn_ok_label').click(affichage_texte_span_gauche);
 
 
	//creation d'une fonction d'affichage d'une ligne, d'un label "Texte du label" et d'une zone de texte 
	function affichage_ligne_label_zone_texte(){
 
	//creation d'une ligne d'id=right et ajout à la div d'id ="en-dessous"		
	$("<hr>",{id:'right'}).appendTo($('#en-dessous'));
 
	//creation de deux lignes et ajout de ces lignes à la div "en-dessous" après la ligne horizontale
	$("<br><br>").insertAfter($("#right"));
 
	//creation du texte "Texte du label" et ajout à la balise d'id = en-dessous
 
	$("#en-dessous").append("Texte du label  ");
 
 
	//ajout d'une zone de saisie de type texte et d'id=id_texte_btn_ok à la div "en-dessous"
	$('<input>').attr({type:'text', id:'id_texte_btn_ok_label'}).appendTo($('#en-dessous'));
 
	//ajout d'un bouton ok_label 
	$('<input/>').attr({type:'button', id:'id_btn_ok_label', value:'OK'}).appendTo($('#en-dessous'));
 
 
	}//fin de fonction affichage_ligne_label_zone_texte
 
 
	function affichage_texte_span_gauche(){
 
		alert('bonjour');
 
 
	}//fin de affichage_texte_span_gauche
 
 
 
	});

C'est cet appel qui ne fonctionne pas ; le click sur le bouton d'identifiant #id_btn_ok_label ne déclenche pas l'appel à la fonction affichage_texte_span_gauche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//appel de la fonction d'affichage du texte saisi dans le span de gauche
	$('#id_btn_ok_label').click(affichage_texte_span_gauche);

Merci beaucoup de votre aide sur ce sujet.

Bien cordialement.

new_wave

**Toufik83** · 23/01/2017, 12h40

génériquement? ou dynamiquement?
pour le clique sur les éléments crées dynamiquement, il faut passer par délégation.
par exemple si nous avons un élément qu'on a crée dynamiquement, qui a une classe 'test', et qu'on veux l'ajouter un événement clique, il faut revenir a son parent (qui ne doit pas être créer dynamiquement) puis on applique le clique comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
//dans cette exemple je prend 'body' comme parent statique
$("body").on("click",".test",function(){
   alert("clicked");
});

**ABCIWEB** · 25/01/2017, 03h00

L'autre solution est de définir le comportement onclick après avoir inséré le bouton et pas avant comme tu le fais dans ton code, soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
//...
//ajout d'un bouton ok_label 
$('<input/>').attr({type:'button', id:'id_btn_ok_label', value:'OK'}).appendTo($('#en-dessous'));
 
//appel de la fonction d'affichage du texte saisi dans le span de gauche
$('#id_btn_ok_label').click(affichage_texte_span_gauche); 
 
}//fin de fonction affichage_ligne_label_zone_texte

Déclencher une fonction au click sur un bouton créé dynamiquement

jQuery

Vue hybride

Discussions similaires

Partager

Partager