Como vincular eventos em conteúdo carregado Ajax?

96

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>
confiar
fonte
1
Nota: O seguinte não está funcionando. Você está faltando .para o seletor de classe.
indefinido
Este foi um erro de digitação! Ainda não está funcionando.
confile
1
Veja o método jquery .load () . $ ('# target'). load ('source.html');
km6zla
Load () faz algo diferente?
confile

Respostas:

218

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/

dsgriffin
fonte
Isso é o que eu escrevi que fiz.
confile
@confile Sério? Eu li sua pergunta duas vezes e não a vejo por escrito ou em código?
dsgriffin
@confile .. Veja a resposta novamente .. isso é diferente do que você tem
Mohammad Adil
2
@confile Minha resposta funciona !! aqui está um exemplo disso - jsfiddle.net/EFjzG
dsgriffin
1
Olá, esta resposta está funcionando muito bem. O evento é anexado a todo o documento, portanto, basicamente, cada clique na página está acionando o evento, mas então, o seletor '.mylink' é aplicado para filtrar os eventos de clique que precisamos. Excelente técnica.
Emir
23

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:

Kai
fonte
3
Prefiro essa resposta a @lifetimes, porque me diz para definir o manipulador para algum elemento pai que está presente no momento do carregamento, não necessariamente até o documento . Isso torna o seletor no segundo argumento onmenos sujeito a correspondências indesejadas.
R. Schreurs
Se a classe html carregada ajax também for elemento-pai, ela não está funcionando
jafar pinjar
6

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

antoniputra
fonte
2

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 );
Elnaz
fonte
1

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

});

Real-Source
fonte
1

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

});
ChristianG
fonte
0

use jQuery.live () em vez disso. Documentação aqui

por exemplo

$("mylink").live("click", function(event) { alert("new link clicked!");});
ROMMEL
fonte
9
.live()está obsoleto e foi removido na última versão do jquery.
Mohammad Adil
0

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 .

Michael
fonte
2
De onde vem esse "Sys.Application"? - '
André Marcondes Teixeira
Parece pertencer ao ASP.NET: msdn.microsoft.com/en-us/library/vstudio/…
Michael,