無限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是其中的另一個頁面，它確實存在。

所以有人知道錯誤消息的原因是：

（索引）：244未捕獲的ReferenceError：未定義ias（...）（匿名函數）@（索引）：244 jquery-3.1.1.min.js：2 jQuery.Deferred異常：jQuery.ias不是函數TypeError： jQuery.ias不是HTMLDocument的函數。 （ HTTP：//本地主機：8000 /：235：24 ）與j（ HTTP：//本地主機：8000 /靜態/ 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"}));
});