如何将jQuery事件应用于使用Ajax get请求动态加载的内容

Question

这是我希望在页面加载时放入我请求的内容中的jQuery：

$(".allComments").hide();
$(".viewAll").click(function(e) {
e.stopImmediatePropagation()
if ($(window).scrollTop() >= 150) {
$([document.documentElement, document.body]).animate({
scrollTop: $(this).offset().top
}, 1000);
}
console.log("view all commment is click")
$(this).parent().siblings('div.allComments').slideToggle();

})

因此，当内容加载时，我想隐藏评论部分，用户可以按下按钮来显示评论。。

问题是jQuery没有发挥作用。。。。我知道我们可以使用jQuery on((事件，但如果我想在页面加载时隐藏注释，我不知道该用它。。

有什么想法可以实现吗？

Answer 1

// Load dynamic content
$(document).ready(function(){
var comments = '';
for(var i = 0 ; i < 10; i++){
comments += '<div>('+i+') Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>';
}  
$('#comment-section').append(comments).hide();
});
// View all button click
$(document).on('click','#view-all',function(){
$('#comment-section').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comment-section"></div>
<button id="view-all">View All</button>