Ajax stuff are not running with Django Infinite Scroll

Question

I have used this tutorial and implemented infinite scrolling in django and that loads the pages.

However my Ajax calls are working only in first page load and are not working in consequent lazy loads. I have followed this answer to using $items.each.... block of code.

But after using the above method, now the waypoint does not load the pages anymore and I am getting stuck on the first page itself(the Ajax call is working). Upon removing the code, the lazy loads is able to load consequent pages. I am using Bootstrap 4 with Django 3. Any suggestions?

I am adding the script that's blocking the lazy load.

<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
$(document).ready(function() {
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $items.each(function(){
            $(this).find('.like').on('click', likecommentevent);
        }
      }
    });
});
</script>

Edit: Alternate update, But this is not what I need

I tried following alternative to onAfterPageLoad above and the lazy load works. But now the Ajax call is being called twice or more.

onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $('.like').on('click', likecommentevent);
      }

Answer 1

I have finally resolved the issue. The calling seems to be very specific upon $items for lazy load to work. PFB the working solution for your reference:

<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
<script>
$(document).ready(function() {
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
        $items.find('.like').on('click', likecommentevent);
      }
    });
});
</script>