Problems with Append and slideToggle

Question

I have a little problem here, and this is it. I have a timeline that displays some posts, by ajax I load more content and make an append, the new items that are displayed do not catch the slideToggle. I manually added the script again on the page that is sending the content by ajax and the slideToggle works, the problem is, when it opens, it already closes quickly and does not leave the div in display, does anyone know how to solve ? I already put None display and did not solve.

$("#maisPostagens").click(function (event) {
    event.preventDefault();
    $("#carregando").toggle();
    var posts = $(".postagens:last").attr("lang");
    if (posts) {
        var url = '_funControllers/exibePostagensLinhaDoTempo.php?posts=' + posts;
        setTimeout(function () {
            $.get(url, function (dataReturn) {
                $("#carregando").toggle();
                $(".auto").append(dataReturn);
            });
        }, 1000);

    }
});

---

//efeito de aparecer e esconder divs de Comentários

$(".auto .postagens .comentarios .linkComentario").on("click", function (event) {
    event.preventDefault();
    $(this).parents('.externa').find('.comentarioPost').slideToggle();

});

Thank you

Answer 1

At the event click you can do so:

$(document).on("click", ".auto .postagens .comentarios .linkComentario", function (event) {
    event.preventDefault();
    $(this).parents('.externa').find('.comentarioPost').slideToggle();
});

When the element is created dynamically, a very good technique is to define it after the event, as in the example above, and assign the event to the document or the "father of all".

Example without the technique

$('button').click(function(){
$('body').append('<div class="box"></div>');
})

$('.box').on('click', function(){
	$(this).css('background', '#fff')
})

.box{
  width: 200px;
  height: 200px;
  background: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>adicionar</button>

Note that Divs are created dynamically, and the click doesn’t work.

Example with the technique

$('button').click(function(){
$('body').append('<div class="box"></div>');
})

$(document).on('click','.box', function(){
	$(this).css('background', 'red')
})

.box{
  width: 200px;
  height: 200px;
  background: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>adicionar</button>

Note that now the dvis with the event click react to it.