Como vincular eventos em conteúdo carregado Ajax?

Eu tenho um link, myLinkque deve inserir o conteúdo carregado com AJAX em um div(appendedContainer) da minha página HTML. O problema é que o clickevento que vinculei com jQuery não está sendo executado no conteúdo recém-carregado que está inserido no appendedContainer. O clickevento é vinculado a elementos DOM que não são carregados com minha função AJAX.

O que devo alterar para que o evento seja encerrado?

Meu HTML:

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

Meu 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!");});

O conteúdo a ser carregado:

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

Use a delegação de eventos para elementos criados dinamicamente:

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

Isso realmente funciona, aqui está um exemplo em que anexei uma âncora com a classe em .mylinkvez de data- http://jsfiddle.net/EFjzG/

Se o conteúdo for anexado após .on () ser chamado, você precisará criar um evento delegado em um elemento pai do conteúdo carregado. Isso ocorre porque os manipuladores de eventos são associados quando .on () é chamado (ou seja, geralmente no carregamento da página). Se o elemento não existir quando .on () for chamado, o evento não será vinculado a ele!

Como os eventos se propagam pelo DOM, podemos resolver isso criando um evento delegado em um elemento pai ( .parent-elementno exemplo abaixo) que sabemos existir quando a página carrega. Veja como:

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

Mais algumas leituras sobre o assunto:

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

se sua pergunta for "como vincular eventos em conteúdo carregado em Ajax", você pode fazer assim:

$("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');
});

então você não precisa colocar sua configuração em cada código Ajax

A partir do jQuery 1.7, o .live()método está obsoleto. Use .on()para anexar manipuladores de eventos.

Exemplo -

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

Para quem ainda está em busca de uma solução, a melhor forma é vincular o evento no próprio documento e não vincular com o evento "on ready". Por exemplo:

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

});

Se sua resposta ajax contém entradas de formulário html, por exemplo, isso seria ótimo:

$(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 () em vez disso. Documentação aqui

por exemplo

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

Para ASP.NET, tente isto:

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

Isso parece funcionar no carregamento da página e no carregamento do painel de atualização

Encontre a discussão completa aqui .