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未捕获的ReferenceError：未定义ias（...）（匿名函数）@（索引）：244 jquery-3.1.1.min.js：2 jQuery.Deferred异常：jQuery.ias不是函数TypeError：jQuery.ias不是函数在HTMLDocument。（http://localhost:8000/:235:24）在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 var ias回调中定义ready，但是尝试在该回调之外引用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"}));
});

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

1 个答案: