Ajouter un événement onClick à des boutons générés dynamiquement?

Question

en Javascript .. Si j'ai un bouton généré dynamiquement et que je veux une fonction onClick générique. Comment puis je faire ça ? Je ne souhaite pas créer une fonction onClick unique pour chaque bouton. Comment puis-je en faire un seul qui s'applique à tous. Par exemple, affichez son texte d'étiquette lorsqu'il est pressé.

Answer 1

Vous pouvez le faire en utilisant une fonctionnalité Javascript appelé "événement bouillonnant". Les éléments ancêtres sont notifiés des événements sur leurs éléments descendants.

Dans ce cas, vous pouvez attacher un gestionnaire click à l'élément body et tous les clics sur ces boutons déclencheront un gestionnaire d'événements. La plus belle façon de le faire en jQuery est d'utiliser la méthode on:

$(document.body).on('click', 'button', function() { 
    alert ('button ' + this.id + ' clicked'); 
}); 

Cela fonctionne peu importe quand les éléments sont créés - avant ou après que les éléments ont été créés.

Cela fait exactement la même chose que la méthode live, mais live utilise on dans les coulisses et est beaucoup moins efficace et flexible.

Answer 2

Vous pouvez déléguer l'événement click aux parents des boutons créés dynamiquement. Voici une excellente explication de la façon dont cela fonctionne: http://davidwalsh.name/event-delegate

En jQuery, vous pouvez utiliser la méthode live. se référer à son document au http://api.jquery.com/live/

Answer 3

Vous pouvez utiliser une méthode en direct qui va lier l'écouteur d'événement aux éléments existants et ceux qui seront créés dans le futur. Cependant, cela peut être écrit avant ou après le code où les boutons ont été créés

$("button[id^=btnInit]").live("click", function(){ 
    // `this` is reference to each button separately - function will be called many times as how many buttons are 
    alert(this.id); 
}) 

En dernière version de jQuery, vous pouvez utiliser à la place à la fois bind et live une méthode on et au lieu unbing et die une méthode off.

Dans jQuery> = 1,7

$("body").on("click","button[id^=btnInit]", function(){ 
     // `this` is reference to each button separately - function will be called many times as how many buttons are 
     alert(this.id); 
    }) 

Answer 4

Si vous utilisez une version inférieure à jQuery 1.7, utilisez live()

$('input[name^="btnInit"]').live("click", function(){ 
    alert("clicked"); 
}); 

pour jQuery 1.7+, utilisez on()

$("body").on("click", "input[name^="btnInit"]", function(){ 
     alert("clicked"); 
});