无限 ajax 滚动在 Django 中不起作用

Question

我正在尝试在我的项目中使用无限 ajax 滚动插件。我只是关注了官方网站并包含了必要的 javascript 文件。以下是我的代码：

<div class="row">
   <div class="col-lg-4">
       <div class="bootstrap-card">
       <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag">
       <div class="overlay">
       <a class="info" href="#">View Details</a>
       </div>
      </div>
   </div>

    <div class="col-lg-4">
        <div class="bootstrap-card">
        <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag">
        <div class="overlay">
        <a class="info" href="#">View Details</a>
        </div>
        </div>
    </div>

    <div class="col-lg-4">
       <div class="bootstrap-card">
       <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag">
       <div class="overlay">
       <a class="info" href="#">View Details</a>
       </div>
       </div>
    </div>
</div>

<script src="{% static 'hw1/js/callback.js' %}"></script>
<script src="{% static 'hw1/js/jquery-ias.min.js' %}"></script>

<div id="pagination">
    <a href="page2.html" class="next">next</a>
</div>

<script>
    $(document).ready(function() {
      var ias = jQuery.ias({
        container: '.row',
        item: '.col-lg-4',
        pagination: '#pagination',
        next: '.next',
        delay: 1250
      });
    });

    ias.extension(new IASSpinnerExtension());
    ias.extension(new IASTriggerExtension({offset: 2}));
    ias.extension(new IASNoneLeftExtension({text: "You reached the end"}));
</script>

所以这里 page2.html 是另一个页面，它确实存在。

那么有谁知道错误信息的原因：

(index):244 Uncaught ReferenceError: ias is not defined(...)(anonymous function) @ (index):244 jquery-3.1.1.min.js:2 jQuery.Deferred 异常：jQuery.ias 不是函数 TypeError：jQuery.ias 不是函数 在 HTML 文档。 (http://localhost:8000/:235:24) 在 j (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:29948) 在 k (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:30262) 未定义

Answer 1

您有范围问题。您在 jQuery ready 回调中定义了 var ias，但试图在该回调之外引用 ias 变量。在该回调之外，ias 变量不存在。此外，因为回调是异步的，所以在 DOM 完全加载之前不会调用回调。这意味着您对 ias.extension() 的调用发生在页面甚至有机会加载之前，这就是 ready 回调首先存在的原因。

要解决此问题，请将您对 ias.extension() 的调用也放入回调中，以便它们都在 jquery 和 ias 已初始化的同一范围内。

$(document).ready(function() {
  var ias = jQuery.ias({
    container: '.row',
    item: '.col-lg-4',
    pagination: '#pagination',
    next: '.next',
    delay: 1250
  });

  ias.extension(new IASSpinnerExtension());
  ias.extension(new IASTriggerExtension({offset: 2}));
  ias.extension(new IASNoneLeftExtension({text: "You reached the end"}));
});