无限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(…)(匿名函数)@ (index):244jQuery jquery-3.1.1.min.js: 2。延迟异常:jQuery。ias不是一个函数。Ias不是一个函数在HTMLDocument。(http://localhost: 8000/: 235:24)At j (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:29948)At k (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:30262) undefined

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