Quel est le bon moyen d'ajouter des auditeurs à de nouveaux éléments après avoir utilisé AJAX pour obtenir le contenu html? (JQuery, Javascript)

Je crée quelque chose qui peut charger de nouvelles pages de configuration via AJAX, je ne suis pas sûr de savoir quel est le moyen le plus efficace de lier les auditeurs à ces éléments de la nouvelle page de contenu?

Voici ma pensée. Je peux faire une fonction qui compare le chemin du fichier et pour chaque condition, puis je vais appliquer les auditeurs corrects à ces nouveaux éléments en fonction de la page que AJAX a chargée. Je pense que cela rendra la fonction si grande si j'ai une grande quantité de pages.

Merci!

Deux façons:

1) Liez sur un conteneur parent non dynamique en utilisant .on()

 $('.some-parent-class').on('click', '.element', function() { // DO STUFF! });

2) Reliez les nouveaux éléments une fois que l'appel ajax est terminé

 $.ajax(url, { // ajax options }).done( function(data) { var newEl = $('<div class="element"></div>'); // Setup your newEl with data here... newEl.on('click', function() { // do stuff }); newEl.appendTo($('.some-parent-class')); });

Le premier aboutit généralement à des temps de réponse plus rapides de l'ajax, mais peut également ralentir la réactivité des clics.

Utilisez jQuery's. On () pour gérer la délégation d'événement. Le premier élément que vous fournissez est un élément statique (jamais supprimé / remplacé). Le premier argument est l'événement sur lequel vous souhaitez déléguer, passer le bouton de souris / cliquer, etc. Le deuxième argument est l'élément sur lequel nous souhaitons que l'événement se déclenche lorsque l'événement se produit. Le 3ème argument est le rappel, qui est la fonction à exécuter lorsque l'événement se déclenche.

 $(document).on('event', 'elementIdentifier', function(){ //your code });

 $(".parent-div").on("click", ".child-div-class-name" ,function(){ somefunction(); });

Tous les nouveaux éléments insérés à l'intérieur de .parent-div auront les auditeurs sur le onclick

En ajoutant à la réponse de Populus, ce qui est génial, une solution logiquement équivalente à sa deuxième option serait d'utiliser une promesse:

  var iGotYou = new Promise(function (res, rej) { $.ajax({ //ajax paramaters }) .done(function( data ) { //handle the data as necessary... //then resolve the Promise res(); }); }); //the Promise has been resolved iGotYou.then(function (response) { //add the event listener now that the promise has been fulfilled document.getElementById('someId').addEventListener('click', function (e) { //whatever you want to do on click event }); })

Je ne suis pas tout à fait sûr de ce que vous demandez ici, mais vous pouvez utiliser la fonction .on () de jQuery pour lier les éléments qui existent déjà dans votre document, ou des éléments qui existeront à l'avenir.

Voici un exemple rapide:

 $(document).ready(function () { $(document).on('click', '#new-button', function() { alert("You clicked the new button"); }); //get some HTML via ajax. Let's assume you're getting <button id="new-button">Click me</button> $.get('url', function(res) { $('body').append(res); }); });