为什么Django JQuery Infinitescroll不起作用无法设置未定义的属性'Infinite'，未定义Waypoint

问题描述

我想进行无限滚动，但是它不起作用，并在控制台中引发错误：

这是我的HTML：

{% extends 'base.html' %}
{% load static %}
{% block imports %}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

{% endblock imports %} 

{% block main %}
<h1 class="title">Was soll es denn heute geben?</h1>
<div class="all-recipes infinite-container" id="all-recipes">
  {% for recipe in queryset_recipes %}
  <div class="recipe-Box infinite-item">
    <a href="{{recipe.get_absolute_url}}" class="recipe-link">
      <img src="{{recipe.images}}" alt="Rezept Bild" class="image" />
      <h3 class="recipe-title">{{recipe.title}}</h3>
    </a>
  </div>
  {% endfor %}
</div>
{% if page_obj.has_next %}
  <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>


{% endblock main %} 
{% block scripts %}
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],onBeforePageLoad: function () {
        $('.loading').show();
      },onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
</script>
{% endblock scripts %}

以下是错误： 1。

infinite.min.js:57 Uncaught TypeError: Cannot set property 'Infinite' of undefined
    at infinite.min.js:57
    at infinite.min.js:58

(index):329 Uncaught ReferenceError: Waypoint is not defined
    at (index):329

我真的希望有人可以帮助我解决这些错误，因为我不知道为什么会这样。谢谢！

解决方法

你应该有而不是

<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>

下一个订单：

<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>

注意jquery.waypoints.min.js