Qual è un modo corretto per aggiungere listener di nuovi elementi dopo aver usato AJAX per ottenere il contenuto html? (jQuery, Javascript)

Question

Sto creando qualcosa che può caricare nuove pagine di impostazione tramite AJAX, non sono sicuro di quale sia il modo più efficiente per associare gli ascoltatori a questi elementi dalla nuova pagina di contenuti?

Ecco il mio pensiero. Posso creare una funzione che confronta il percorso del file e, per ciascuna condizione, applicherò i listener corretti a quei nuovi elementi in base alla pagina caricata da AJAX. Mi sembra che renderà la funzione così grande se avrò una grande quantità di pagine.

Grazie!

Answer 1

Utilizzare jQuery. on() per gestire la delega degli eventi. Il primo elemento che fornisci è un elemento statico (mai rimosso/sostituito). il primo argomento è l'evento a cui si desidera delegare, mouseover/click, ecc. Il secondo argomento è l'elemento su cui si desidera attivare l'evento quando si verifica l'evento. Il terzo argomento è il callback, che è la funzione da eseguire quando l'evento si attiva.

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

Answer 2

due modi:

1) Bind su un contenitore padre non dinamica utilizzando .on()

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

2) Assorbire i nuovi elementi dopo chiamata AJAX è completata

$.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')); 
}); 

Il primo di solito porta a tempi di risposta più rapidi, ma può anche rallentare la reattività verso il basso.

Answer 3

Non sono del tutto sicuro di cosa stai chiedendo qui, ma puoi usare la funzione .on() di jQuery per associare a elementi già esistenti nel tuo documento, O elementi che esisteranno in futuro.

Ecco un breve esempio:

$(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); 
    }); 
}); 

Answer 4

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

tutti i nuovi elementi inseriti all'interno del .parent-div saranno avente le ascoltatori onclick

Answer 5

Aggiungendo alla risposta Populus', che è grande come è , una soluzione logicamente equivalente alla sua seconda opzione sarebbe quella di utilizzare Promises:

 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 
     }); 
    })