¿Cómo vincular eventos en contenido cargado Ajax?

Tengo un enlace, myLinkque debería insertar contenido cargado con AJAX en un div(appendedContainer) de mi página HTML. El problema es que el clickevento que he vinculado con jQuery no se está ejecutando en el contenido recién cargado que se inserta en el contenedor adjunto. El clickevento está vinculado a elementos DOM que no están cargados con mi función AJAX.

¿Qué tengo que cambiar para que el evento quede vinculado?

Mi HTML:

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

Mi JavaScript:

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

El contenido a cargar:

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

Utilice la delegación de eventos para elementos creados dinámicamente:

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

Esto realmente funciona, aquí hay un ejemplo en el que agregué un ancla con la clase en .mylinklugar de data: http://jsfiddle.net/EFjzG/

Si el contenido se agrega después de llamar a .on (), deberá crear un evento delegado en un elemento principal del contenido cargado. Esto se debe a que los controladores de eventos están vinculados cuando se llama a .on () (es decir, normalmente al cargar la página). Si el elemento no existe cuando se llama .on (), ¡el evento no estará vinculado a él!

Debido a que los eventos se propagan a través del DOM, podemos resolver esto creando un evento delegado en un elemento principal ( .parent-elementen el ejemplo siguiente) que sabemos que existe cuando se carga la página. Así es cómo:

$('.parent-element').on('click', '.mylink', function(){
  alert ("new link clicked!");
})

Algunas lecturas más sobre el tema:

• https://learn.jquery.com/events/event-delegation/
• http://jqfundamentals.com/chapter/events

si su pregunta es "cómo vincular eventos en contenido cargado ajax", puede hacer esto:

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

por lo que no necesita colocar su configuración en cada código ajax

A partir de jQuery 1.7, el .live()método está obsoleto. Úselo .on()para adjuntar controladores de eventos.

Ejemplo -

$( document ).on( events, selector, data, handler );

Para aquellos que todavía están buscando una solución, la mejor manera de hacerlo es vincular el evento en el documento mismo y no vincularlo con el evento "listo". Por ejemplo:

$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    $.ajax({
        type: 'post',
        url: url,
        data: $(this).serialize(),
        success: function (data) {
            // DO WHAT YOU WANT WITH THE RESPONSE
        }
    });
});

});

Si su respuesta ajax contiene entradas de formulario html, por ejemplo, esto sería genial:

$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) { 
if (this.value == 'Yes') {
  // do something here
} else if (this.value == 'No') {
  // do something else here.
} else {
   console.log('The new input field from an ajax response has this value: '+ this.value);
}

});

use jQuery.live () en su lugar. Documentación aquí

p.ej

$("mylink").live("click", function(event) { alert("new link clicked!");});

Para ASP.NET intente esto:

<script type="text/javascript">
    Sys.Application.add_load(function() { ... });
</script>

Esto parece funcionar al cargar la página y al cargar el panel de actualización

Encuentre la discusión completa aquí .