come allegare gestori di eventi jquery per l'html appena iniettato?

Question

Come utilizzare .on() se l'HTML non è stato ancora generato? La pagina jQuery dice

Se nella pagina viene iniettato un nuovo codice HTML, seleziona gli elementi e associa i gestori di eventi dopo che il nuovo codice HTML è stato inserito nella pagina.

Ma non sono proprio sicuro di come farlo. C'è un modo per "ricaricare" il gestore di eventi?

Quindi, se ho avuto

$(document).ready(function(){ 
    $('.test').on('click', function(){ 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 
generatePage(); 
}); 

dove generatePage() crea un gruppo di div con .test, come potrei associare nuovamente .on()?

Sono consapevole che domande simili sono state fatte, ma non ho trovato quello che stavo cercando dopo una ricerca rapida.

Answer 1

Utilizzare. Come nell'esempio seguente. Si può presumere che il body-tag sia sempre disponibile, quindi è sicuro collegare il gestore di eventi al corpo e delegare gli eventi al selettore, in questo caso . Test.

$(document).ready(function(){ 
    $('body').on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

O se generatePage() è anche la generazione dei tag html, testa e corpo L'uso documento come selettore.

$(document).ready(function(){ 
    $(document).on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

Secondo la jquery documentation .on accetta i seguenti parametri:

.on(events [, selector] [, data], handler(eventObject)) 

Comprese selettore è descritto come segue:

Quando è previsto un selettore, il gestore di eventi viene denominato delegato. Il gestore non viene chiamato quando l'evento si verifica direttamente su l'elemento associato, ma solo per i discendenti (elementi interni) che corrispondono al selettore. jQuery fa bollire l'evento dall'evento target su all'elemento in cui è collegato il gestore (ovvero, più esterno all'elemento più esterno) e esegue il gestore per qualsiasi elemento lungo il percorso corrispondente al selettore.