JQuery - comment lier une fonction change() à un <select> créé dynamiquement?

Question

Je crée des éléments sur le DOM par JS. La question est, comment assigner la fonction .change() pour chaque nouvel élément créé?

Answer 1

Encore mieux que le .live(), d'un point de vue de la performance, est .delegate(). Cela fonctionne de la même manière que .live(): il utilise quelque chose appelé événement bubbling, ce qui signifie que lorsqu'un événement est déclenché sur un élément DOM, les parents de cet élément sont tous notifiés de l'événement. delegate, cependant, a une syntaxe quelque peu plus agréable et un avantage de performance substantiel.

$('#parentElement').delegate('select.yourSelectClass', 'change', function() { 
    // do your processing here 
}); 

#parentElement peut être un sélecteur qui correspond à l'élément ancêtre commun de tous les éléments select que vous allez ajouter. Cela peut être document.body, mais il y aura probablement un autre élément dans l'arborescence DOM auquel vous pouvez vous lier.

select.yourSelectClass signifie que ce gestionnaire ne sera déclenché que sur certains éléments de la classe yourSelectClass. Vous pouvez modifier ce sélecteur pour utiliser toute autre syntaxe de sélecteur jQuery comme vous le souhaitez.

Answer 2

Essayez la fonction live: http://api.jquery.com/live/

Answer 3

Let jQuery.live() être votre ami:

$('.yourSelectClass').live('change', function(event){ 
    // Handle the Change event here. 
}); 

Answer 4

Use jQuery live. (Version 1.3 ou supérieure)

$(".classOfJSCreatedElements").live('change', 
function(event){ 
//do stuff 
}); 

Si vous devez utiliser une ancienne version de jQuery utiliser le livequery plug-in

Source: jQuery FAQ