Déclencher une fonction au click sur un bouton créé dynamiquement
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:
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:
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:
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
