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

Question

This is the jQuery I want the put in the content I am requesting when the page load:

 $(".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(); })

So when the content loads, I want to hide the comment section and the user will be able to press a button to reveal the comments..

the problem is the jQuery is not taking into effects.... I know we can use the jQuery on() event but I do not know to use it, if I want the hide the comments when the page loads..

Any ideas how to achieve that?

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>