Unendlich Ajax Scroll funktionierte nicht in Django

Question

Ich versuche, in meinem Projekt unendliche Ajax Scroll-Plugin zu verwenden. Ich folgte nur der offiziellen Website und enthalte die notwendigen Javascript-Dateien. mein Code ist folgende:

<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> 

Also hier page2.html ist eine weitere Seite in und es existiert.

So weiß jemand, warum die Fehlermeldung:

(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

Sie einen Bereich Problem. Sie definieren var ias innerhalb des Rückrufs jQuery ready, versuchen jedoch, auf die ias-Variable außerhalb dieses Rückrufs zu verweisen. Außerhalb dieses Rückrufs existiert die ias Variable nicht. Da der Rückruf asynchron ist, wird der Rückruf erst aufgerufen, wenn das DOM vollständig geladen ist. Dies bedeutet, dass Ihre Anrufe an ias.extension() geschehen, bevor die Seite überhaupt eine Chance zum Laden hatte, weshalb der Rückruf ready an erster Stelle existiert.

Um dies zu beheben, setzen Sie Ihre Anrufe innerhalb des Callbacks auf ias.extension(), damit sie alle im selben Bereich sind, in dem sowohl jquery als auch ias initialisiert wurden.

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