Gestionnaires d'événements sur des éléments créés dynamiquement?

$(document).ready(function() { 
 

 
    $('.add-button').on('click', function() { 
 
    
 
     $('.alert-button').after('<button type="button" class="alert-button">Click me! </button><br>'); 
 
    
 
    }); 
 
    
 

 
    $('.alert-button').on('click', function() { 
 
    
 
    alert('HI!'); 
 
    
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type='button' class="alert-button">Click me! </button><br> 
 
<button type="button" class="add-button">Add button!</button>

Salut! Mon code "$ ('. Alert-button') .on ('click' ..." fonctionne sur les éléments créés lors du chargement de la page, mais pas sur les éléments créés de façon dinamique ..

Donc j'ai une page avec 2 boutons (Si vous cliquez sur "Click me!", l'alerte "Hi!" apparaît

Mais lorsque je clique sur le bouton "Click me!" en appuyant sur "Ajouter un bouton", un clic sur le " Cliquez sur moi! "Ne produit aucune alerte" Hi! "(Bien qu'il ait aussi la classe" .alert-button ")

Je veux voir l'alerte" Hi! "Lorsque je clique sur un bouton" Click me! ".

Que dois-je faire? :)

Source

2017-06-14 Sergej Fomin

https://jsfiddle.net/fb3m2mex/ Est ce que vous cherchez. – maxshuty

@maxshuty - oui, c'est le cas! Où puis-je lire la documentation à ce sujet? Je ne comprends vraiment pas comment les gestionnaires d'événements fonctionnent en js .... –

https://api.jquery.com/on/ est un bon début. Juste pour qu'il soit clair que c'est ce que nous faisons ici. Fondamentalement je pense que votre confusion était que votre gestionnaire travaillerait pour les nouveaux éléments, mais vraiment cela ne fonctionne que pour ceux qui existent déjà sur la page, pas de nouveaux qui sont créés. :) – maxshuty

Le gestionnaire de clic est uniquement lié aux éléments qui existent déjà. Vous devrez ajouter des gestionnaires aux éléments lors de leur création dynamique. Dans votre cas, le meilleur endroit à faire est dans la fonction .on juste après la création du nouvel élément.

Source

2017-06-14 18:31:03

merci, Ben, mais je ne comprends pas comment puis-je ajouter un gestionnaire dans la fonction .on après la création du nouvel élément ..... –

Après l'exécution de la méthode 'after()', à la ligne suivante, affectez un gestionnaire d'événement à '.alert-button' (ou ce que vous préférez). –

suffit de remplacer cette fonction:

$(document).on('click','.alert-button', function() { 

    alert('HI!'); 

});

Cela lie également l'événement click sur un élément dynamique ajouté.

Source

2017-06-14 18:33:26

Gestionnaires d'événements sur des éléments créés dynamiquement?

Répondre

Questions connexes