0

Prezado(a)s,

tenho uma div que é preenchida via ajax:

    function atualizaConteudo(){
        $.ajax({
            url: 'getters/conteudo_amanha.php',
            success: function(data) {
                $('#conteudo_amanha').html(data);
            }
        });
    }
    atualizaConteudo();

A div fica da seguinte forma:

    <div id="conteudo_amanha">
        <button type="button" class="novo-detalhe" data-id_conteudo="4">
            Mostrar conteudos
        </button>
        <div id="conteudo_4" style="display: none">
            Conteudos recuperados
        </div>
    </div>

Tento fazer o slideToggle():

    $('.novo-detalhe').on('click',function(){
        var id_conteudo= $(this).data('id_conteudo');
        $('#conteudo_'+id_conteudo).slideToggle();
    });

Preciso que a div recuperada via ajax (#conteudo_4), seja ocultada/mostrada quando o usuário clicar no botão, coloquei a div dentro da página (em vez de utilizar o ajax para inserir dentro da div #conteudo_amanhã), deu certo, mas não estou conseguindo fazer funcionar usando a requisição ajax.

Sou novo com ajax e jquery...

2 Respostas 2

0

Quando o elemento é criado depois do DOM ter sido totalmente carregado, a delegação de eventos do jQuery não costuma funcionar.

Para delegação de eventos de elementos criados dinamicamente, use o seguinte código:

$(document).on('click', '.novo-detalhe', function () {

     var id_conteudo = $(this).data('id_conteudo');

     $('#conteudo_'+id_conteudo).slideToggle();
})

Isso basicamente fará que todos os elementos que tenham a classe novo-detalhe disparem o evento click, idependente de serem criados dinamicamente ou não.

Na delegação de eventos para elementos dinâmicos, sempre é preciso definir como seletor o elemento pai, que é fixo no documento, para poder definir os filhos que serão dinâmicos. No nosso caso, usamos document, pois é a "raiz" de todo o documento, mas poderíamos usar outro elemento como base para a delegação dinâmica, no caso o #conteudo_amanha, que parece ser fixo no seu caso.

Sendo ele o "pai" que recebe os "filhos" dinâmicos, poderíamos fazer assim:

 $("#conteudo_amanha").on('click', '.novo-detalhe', function () {
     // faça sua mágica acontecer aqui
 })

Observação: A resposta anterior resolve o seu problema, mas não é a melhor maneira.

Dê uma olhada nessa pergunta do Stackoverflow InglÊs:

1
0

Já tive um problema igual e o meu eu resolvi assim:

function atualizaConteudo(){
    $.ajax({
        url: 'getters/conteudo_amanha.php',
        success: function(data) {
            $('#conteudo_amanha').html(data);
            $('.novo-detalhe').on('click',function(){
                 var id_conteudo= $(this).data('id_conteudo');
                 $('#conteudo_'+id_conteudo).slideToggle();
            });
        }
    });
}
atualizaConteudo();

O onclick deve ser setado apos o conteúdo ser carregado.

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 .