How to slideToggle() from div that was requested via ajax?

Question

Dear Mr(a)s,,

I have a div that is filled via ajax:

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

The div is as follows:

    <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>

I try to do the slideToggle():

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

I need the recovered div via ajax (#content_4), to be hidden/shown when the user clicks the button, I put the div inside the page (instead of using ajax to insert into the div #content_tomorrow)worked, but I’m unable to make it work using ajax request.

I’m new to ajax and jquery...

Answer 1

I’ve had a problem like this before and I’ve solved it like this:

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

onclick must be set after content is loaded.

Answer 2

When the element is created after the DOM has been fully loaded, jQuery’s event delegation does not usually work.

For events delegation of elements created dynamically, use the following code:

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

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

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

This will basically make all the elements that have the class novo-detalhe trigger the event click, whether they are created dynamically or not.

In the event delegation for dynamic elements, it is always necessary to define as selector the parent element, which is fixed in the document, in order to define the children that will be dynamic. In our case, we use document, because it is the "root" of the whole document, but we could use another element as a basis for dynamic delegation, in this case the #conteudo_amanha, which seems to be fixed in your case.

Being the "father" who receives the dynamic "children", we could do so:

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

Observing: The previous answer solves your problem, but it is not the best way.

Take a look at this question from Stackoverflow English:

• https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements