Les fonctions jquery ne fonctionnent pas sur les éléments dom chargés de manière asynchrone

J’ai écrit des gestionnaires d’événements jQuery sur des éléments DOM qui ne figurent pas encore dans la page mais qui pourraient être chargés de manière asynchrone dans la page. Ce que j’ai observé, c’est que ces gestionnaires d’événements ne semblent pas reconnaître que de nouveaux éléments ont été ajoutés au DOM et qu’ils doivent agir en conséquence.

Ai-je raison dans mon observation? Comment puis-je obtenir cette fonctionnalité?

Si vous voulez que les gestionnaires d’événements travaillent sur du contenu ajouté de manière dynamic, vous devez l’utiliser on

 $(document).on("click", "someCssSelector", function(){ //your code here }); 

Bien entendu, tous les clics enregistrés sur votre page seront surveillés. Pour être plus efficace, voyez si vous pouvez structurer votre page de manière à ce que tous ces éléments dont l’événement click vous souhaitez gérer se trouvent dans un même conteneur. Autrement dit, si tous ces éléments doivent être ajoutés à une div avec un identifiant de foo , vous écrivez ce qui précède plus efficacement en tant que

 $("#foo").on("click", "someCssSelector", function(){ //your code here }); 

Si vous utilisez jQuery <1,7, vous utiliseriez délégué

 $(document).delegate("someCssSelector", "click", function(){ //your code here }); 

Ai-je raison dans mon observation?

Oui.

Comment puis-je obtenir cette fonctionnalité?

Utilisation de la fonction .on pour vous abonner à ces gestionnaires d’événements si vous utilisez jQuery 1.7+:

 $(document).on('click', '.someSelector', function() { ... }); 

ou en utilisant la fonction .delegate si vous utilisez une version plus ancienne (supérieure à 1.4.3):

 $(document).delegate('.someSelector', 'click', function() { ... }); 

Pour les deux, vous pouvez utiliser une racine plus spécifique que document pour améliorer les performances si vous savez que ces éléments seront ajoutés à un conteneur, par exemple.

Et si vous utilisez une version préhistorique, vous pouvez utiliser .live() :

 $('.someSelector').live('click', function() { ... });