Django Infinite Scroll 没有运行 Ajax 的东西答案

【问题标题】：Ajax stuff are not running with Django Infinite ScrollDjango Infinite Scroll 没有运行 Ajax 的东西
【发布时间】：2020-09-11 06:14:51
【问题描述】：

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

但是，我的 Ajax 调用仅在首页加载时有效，在随后的延迟加载中无效。我有 followed this answer 使用 $items.each.... 代码块。

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

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

<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);
      }

【问题讨论】：

过滤代替查找，效果不佳
无限滚动后，您的 get post 方法是否在模板中工作？我有问题。每当我将 get post 方法放在基于类的视图中并进行有限滚动时。无限加载停止。有什么建议吗？
@Rohan 在使用无限滚动时，您需要将 Ajax 用于 get 和 post 方法。
@ROHAN 也使用 $items 来查找我的答案中显示的控件。
因为它易于实现，但也增加了新的工作.....ajax stufff

标签： jquery django ajax django-templates django-pagination

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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


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

【讨论】：

做到了。但什么都没有改变。
您正在尝试使用库挂钩。让我写的更容易
我试过了，但没有做对。你能试试我上面的代码并代表它吗？

【解决方案3】：

我终于解决了这个问题。该调用似乎对 $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>

【讨论】：