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:

    $('.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

Entradas populares