Ajax 东西不是运行 Django Infinite Scroll

Question

我已经使用 this tutorial 并在 django 中实现了无限滚动并加载了页面。

然而，我的 Ajax 调用仅在第一页加载中有效，在随后的延迟加载中无效。我使用 $items.each.. 代码块。

但是在使用上述方法后，现在航路点不再加载页面，我卡在了第一页本身（Ajax 调用有效）。删除代码后，延迟加载能够加载后续页面。我正在使用 Bootstrap 4 和 Django 3。有什么建议吗？

我正在添加阻止延迟加载的脚本。

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

编辑：备用更新，但这不是我需要的

我尝试了上面的 onAfterPageLoad 替代方法，并且延迟加载有效。但是现在 Ajax 调用被调用了两次或更多次。

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

Answer 1

加载页面脚本和资源后需要调用您的代码

$(document).ready(function() {
  $(".infinite-container").waypoint(function(direction) {
    // your code
    if (direction === 'down') {
        losdMore();
    }
  }   
  function loadMore() {
    console.log("Loading page " );


    $.waypoints('refresh');
}    
});

Answer 2

我终于解决了这个问题。该调用似乎非常特定于 $items 以使延迟加载起作用。 PFB工作方案供大家参考：

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

Answer 3

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

进一步扩展 likecommentevent 是一个存储有函数的值。（我的行话很不专业） likecommentevent 从哪里来，存储什么？它可能看起来像这样：这类似于 upvote/downvote 系统。

var likecommentevent = function(event){

var answerid=$(this).data('answer');
        // Ajax
        $.ajax({
            url:"/save-downvote",
            type:"post",
            data:{
                answerid:answerid,
                csrfmiddlewaretoken:"{{csrf_token}}"
            },
            dataType:'json',
            success:function(res){
                var _prevupvote=$(".downvote-count-"+answerid).text();
                if(res.bool==true){
                    $(".downvote-count-"+answerid).text(parseInt(_prevupvote)+1);
                }
            }
        });
 }

无论你有什么功能，都这样存储并传入onAfterLoad:function($items){ ##here## }

Ajax 东西不是运行 Django Infinite Scroll

Ajax stuff are not running with Django Infinite Scroll

jquery

django

ajax

django-templates

django-pagination

Ajax 东西不是 运行 Django Infinite Scroll

Ajax stuff are not running with Django Infinite Scroll

jquery

django

ajax

django-templates

django-pagination

Ajax 东西不是运行 Django Infinite Scroll