無限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 exception: jQuery.ias is not a function TypeError: jQuery.ias is not a function at 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回調首先存在的原因。

要解決這個問題，請將您的調用內置到回調函數中，以便它們都處於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"})); 
});