Vincular eventos a elementos añadidos dinámicamente

Question

Estoy intentando vincular funciones a elementos recién agregados usando jquery ... He probado numerosos ejemplos en línea, pero de alguna manera, nada me funciona. Creé un formulario con id y un botón, al enviar ajax carga elementos de otra página e inserta el html en el sitio web actual. Todo parece funcionar bien, pero los elementos recién cargados no tienen ningún evento vinculado. Aquí es el 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> 

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

El div edición de contenido se carga justo después del elemento de formulario. Tiene algunos elementos, que podrían estar ligados a las funciones de jQuery.

Answer 1

Para añadir eventos a los elementos que se añaden a la DOM después de la carga de la página es necesario utilizar ya sea delegate(), o si está usando jQuery 1.7+ on().

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

API:
Delegate
On

Answer 2

conseguido básicamente dos opciones para hacer esto:

1. enlazar los eventos después de anexar el nuevo html:

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

2. Usar delegación de eventos (con .on() o .delegate()).

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

   Esto delegar el evento click a un elemento .some-contenedor para cualquier niño con .edit-botón de clase, no importa que éste ya estaba en el DOM o se carga después.