jQuery: Usar event handlers en elementos dinámicos cargados via ajax
Tengo un listado de alumnos.
Al al hacer click sobre algun alumno se carga via ajax un formulario de inscripción a cursos (la url podria ser por ejemplo: /alumnos/inscripcioncurso/alumnoid/12)
Necesito manejar la lógica de ese formulario ya que dentro de el también habrán consultas ajax disparadas por eventos. Pongo la lógica en un js y lo agrego al html principal (el del listado).
El handler que maneja la inscripción es algo asi:
Pruebo el código anterior, hago click en el checkbox de clase .selectorCurso para inscribir un alumno, yyyyyyyyy.....no anda :(.
Solución? Usar el manejador .live: (http://api.jquery.com/live)
Dejando el código de esta manera todo anda bien:
Esto es porque jQuery maneja de manera distinta los eventos de los elementos cargados directamente en el DOM y los elementos cargados dinámicamente.
Métodos equivalentes:
Al al hacer click sobre algun alumno se carga via ajax un formulario de inscripción a cursos (la url podria ser por ejemplo: /alumnos/inscripcioncurso/alumnoid/12)
Necesito manejar la lógica de ese formulario ya que dentro de el también habrán consultas ajax disparadas por eventos. Pongo la lógica en un js y lo agrego al html principal (el del listado).
El handler que maneja la inscripción es algo asi:
$('.selectorCurso').click(function(event)
{
event.preventDefault();
if (!$(this).is(":checked"))
borrarInscripcion($(this));
else
guardarInscripcion( $(this) );
});
Pruebo el código anterior, hago click en el checkbox de clase .selectorCurso para inscribir un alumno, yyyyyyyyy.....no anda :(.
Solución? Usar el manejador .live: (http://api.jquery.com/live)
Dejando el código de esta manera todo anda bien:
$('.selectorCurso').live("click", function(event)
{
event.preventDefault();
if (!$(this).is(":checked"))
borrarInscripcion($(this));
else
guardarInscripcion( $(this) );
});
Esto es porque jQuery maneja de manera distinta los eventos de los elementos cargados directamente en el DOM y los elementos cargados dinámicamente.
Métodos equivalentes:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Comentarios
Publicar un comentario