IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

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


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Profil pro
    Inscrit en
    Mai 2002
    Messages
    988
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2002
    Messages : 988
    Par défaut 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 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

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    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");
    });

  3. #3
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    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

Discussions similaires

  1. Réponses: 4
    Dernier message: 29/04/2010, 06h30
  2. appel d'une fonction en cliquant sur un bouton
    Par om_fanatics dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 22/04/2009, 09h56
  3. [XL-2003] insertion d'une fonction apres clique sur bouton
    Par moxo01 dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 10/04/2009, 15h36
  4. [HTML] affichage d'une page après clic sur le bouton 'précédent' du navigateur
    Par val_lala dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 06/04/2008, 23h21
  5. Réponses: 2
    Dernier message: 26/07/2005, 15h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo