javascript - pagina - ¿Cómo vincular eventos en contenido cargado Ajax?

llamar archivo javascript desde html

Question

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

¿Qué tengo que cambiar para que el evento esté 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>

Answer 1

A partir de jQuery 1.7, el método .live() está en desuso. Use .on() para adjuntar manejadores de eventos.

Ejemplo -

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

Answer 2

Para ASP.NET prueba esto:

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

Esto parece funcionar en la carga de la página y en la carga del panel de actualización

Por favor encuentre la discusión completa here .

Answer 3

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

});

Answer 4

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 manejadores de eventos están vinculados cuando se llama a .on () (es decir, generalmente en la carga de la página). Si el elemento no existe cuando se llama a .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 padre (elemento .parent-element en el ejemplo a continuación) 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

Answer 5

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

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

Esto realmente funciona, he aquí un ejemplo donde .mylink un ancla con la clase .mylink lugar de data - http://jsfiddle.net/EFjzG/

Answer 6

si su pregunta es "cómo enlazar eventos en un contenido cargado de 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

Answer 7

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

p.ej

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