Écouteur d’événements dans les éléments ajoutés après le chargement du contenu DOM

Je dois écouter un événement “change” d’un mais cela ne fonctionne que pour la première sélection. Un bouton ajoute plus de au document . Je dois donc vérifier si un est modifié, Je fais quelque chose comme ça:

 document.addEventListener('DOMContentLoaded', function() { var selects = document.getElementsByClassName('select'); for(var i=0;i < selects.length;i++) { selects[0].addEventListener('change', function() { // do something here... }, false); } }, flase);

mais cela ne s’exécute que lorsque DOMContentLoaded et si je l’exécute en dehors du document.addEventListener il ne s’exécute pas.

PS: Je fais cela avec JS pur, car jQuery est identique et j’ai plus de contrôle sur mon script avec JS pur.

Lier des événements directement aux nœuds DOM est acceptable, étant donné que ces nœuds existent déjà dans le DOM.

Mais, selon vos requêtes, il existe une meilleure approche qui permet de lier les gestionnaires d’événements donnés aux nœuds actuels ET aux nœuds ajoutés ultérieurement.

Vous pouvez utiliser le bullage d’événements: les événements attachés à un nœud sont déclenchés pour le nœud lui-même et tous ses parents. Ici, je me sers de l’élément body comme nœud parent, mais vous pouvez définir l’écouteur sur n’importe quel élément, étant donné qu’il est parent des éléments de sélection actuels et futurs:

 document.body.addEventListener("change", function(e) { console.log(e.target); }

Regardez cet exemple pour avoir une meilleure idée: http://jsfiddle.net/6HqqA/ .

Voici une bonne explication du concept d’événement bouillonnant: http://davidwalsh.name/event-delegate .

Ne les attachez pas de cette façon, utilisez la fonction on de jquery

 $(document).on('change', 'select', function(){ // your code });

http://api.jquery.com/on/

Essayez ceci ( avec jquery ) –

 $(function(){ $(document).on('change','select', function(){ // do something here... var val = $(this).val(); }); });

Cela fonctionnera même si vous ajoutez plusieurs sélections de manière dynamic.