0

Eu fiz um sistema em Codeigniter que faz busca em tempo real. Na minha busca, envio os parâmetros via Ajax para o controller e faço a consulta.

Mando todo o HTML para uma view. Depois eu pego todo o HTML dessa view pelo ajax e alimento a minha página substituindo o conteúdo atual pelo novo. Eu fiz um video de 1 minuto mostrando o erro:

https://www.youtube.com/watch?v=bRkY3JwBV-0

O erro é que a function que eu fiz de mostrar/esconder conteúdo (clicando na imagem) funciona antes do Ajax mas não funciona após o Ajax que some com o conteúdo atual e alimenta a div com conteúdo novo.

Function que deixa de funcionar

$('a[href^="#"]').bind("click", function(event){

    event.preventDefault();

    var the_id = $(this).attr("href");

    $(".detalhes").addClass('hide');

    $("div"+the_id+"").parent(".detalhes").removeClass('hide');

    $(".theblog ").removeClass("hide"); 

    $(this).parents(".theblog").addClass("hide");

    $('html, body').animate({ scrollTop:$(the_id).offset().top-25}, 'slow');
});

Eu estava estudando sobre elementos que não existem e delegate estes dias e acho que tem alguma coisa haver com esse assunto, será que alguém consegue me ajudar a resolver. Eu acho que eu tenho que mudar essa função pra ela funcionar nos elementos que existem e nos que vão existir.

Bom, é isso.

1 Resposta 1

1

Você precisa adicionar os eventos em um elemento pai, que não seja alterado pelo ajax depois do carregamento inicial, algo como:

$("body").on("click", 'a[href^="#"]', function(event){

    event.preventDefault();

    var the_id = $(this).attr("href");

    $(".detalhes").addClass('hide');

    $("div"+the_id+"").parent(".detalhes").removeClass('hide');

    $(".theblog ").removeClass("hide"); 

    $(this).parents(".theblog").addClass("hide");

    $('html, body').animate({ scrollTop:$(the_id).offset().top-25}, 'slow');
});

Pense da seguinte forma, os eventos são atribuídos apenas no carregamento inicial, então todos os 'a[href^="#"]' ja existentes vão receber as atribuições e vão funcionar, mas em seguida, você limpa eles e substitui por novos sem essa atribuição de eventos, então a função deixa de funcionar. Mas fazendo a atribuição no body, ele que vai responder pelo evento e repassar para seus filhos 'a[href^="#"]' tanto os já existes como todos os novos que forem criados depois...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .