Associare eventi a elementi aggiunti dinamicamente

Question

Sto cercando di associare funzioni agli elementi appena aggiunti utilizzando jquery ... Ho provato numerosi esempi online, ma in qualche modo non funziona per me. Ho creato un modulo con id e un pulsante, su submit ajax carica elementi da un'altra pagina e inserisce l'html sul sito web corrente. Tutto sembra funzionare correttamente, ma gli elementi appena caricati non hanno nessun evento associato. Ecco il codice html:

<form id="tclick" method="post" action="${tg.url('/entryCmd')}"> 
    <input type="hidden" name="id" value="${entries[0].id}" /> 
    <input type="submit" value="submit"/> 
</form> 

e jQuery:

$("#tclick").on("submit", function(data){ 
    var h = $(this).serialize(); 
    var d; 

    $.get($(this).attr("action"), h, 
     function(returnData) { 
      d = returnData; 
     } 
    ); 

    $(this).ajaxStop(function(){ 
     $(this).after($(d).find(".edit-content").html()); 
    }); 

    return false; 
}); 

Il div edit-contenuto viene caricato subito dopo l'elemento del modulo. Ha alcuni elementi, che potrebbero essere associati alle funzioni jQuery.

Answer 1

Per aggiungere eventi agli elementi aggiunti al DOM dopo il caricamento della pagina, è necessario utilizzare delegate() o se si utilizza jQuery 1.7+ on().

$(".edit-content").delegate("#myDiv", "click", function() { 
    // do stuff when #myDiv gets clicked. 
}); 

API:
Delegate
On

Answer 2

Got fondamentalmente due opzioni per fare questo:

1. Bind gli eventi dopo aggiungendo il nuovo HTML:

   $(this).ajaxStop(function(){ 
       $(this).after($(d).find(".edit-content").html()); 
       // do you binding here 
   }); 
   

2. Utilizzare la delega degli eventi (con .on() o .delegate()).

   $('.some-container').on('click', '.edit-button', function(e) {...}); 
   

   Questa delegherà l'evento click a un .some-contenitore elemento per tutti i bambini con classe di .edit-tasto, non importa quest'ultimo era già nel DOM o caricato in seguito.