Laravel 5.4 + jScroll.jsが機能しない

Question

this tutorialに基づいて無限スクロールを実装しようとしています。

もっと簡単ではありませんか？まあ...それは働いていない。これは、ここに私のコードです：ルートファイルで

（簡単なテストだったので、私はコントローラに入れていなかった）home.blade.php

<div class="infinite-scroll"> 
@foreach($articles as $article) 
    <article class="post"> 
     <header> 
      <div class="title"> 
       <h2>{{ $article->title }}</h2> 
      </div> 
     </header> 
    </article> 
@endforeach 
</div> 

{{ $articles->links() }} 

で

Route::get('/', function(){ 

$articles = \App\Article::paginate(1); 

return view('home')->with('articles', $articles); 

}); 

同じファイルの末尾に

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script> 
<script type="text/javascript"> 
    $('ul.pagination').hide(); 
    $(function() { 
     $('.infinite-scroll').jscroll({ 
      autoTrigger: true, 
      debug: true, 
      loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />', 
      padding: 0, 
      nextSelector: '.pagination li.active + li a', 
      contentSelector: '.infinite-scroll', 
      callback: function() { 
       $('ul.pagination').remove(); 
      } 
     }); 
    }); 
</script> 

コンソールには何もありません。何も起こっていないように。

私は何かが不足していますが、何がわかりません。間違ったことがありますか？ありがとう！

ps。私もcontentSelector: '.infinite-scroll'をcontentSelector: 'div.infinite-scroll',に変更しました。しかし何も。

Answer 1

私は問題が何であるかを今見、あなたのページネーションは無限スクロールの外にある

があれば

<div class="infinite-scroll"> 
@foreach($articles as $article) 
    <article class="post"> 
     <header> 
      <div class="title"> 
       <h2>{{ $article->title }}</h2> 
      </div> 
     </header> 
    </article> 
@endforeach 
{{ $articles->links() }} 
</div> 

についての アフマド

Answer 2

は次のように試してみてください：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.7/jquery.jscroll.min.js"></script> 
<script type="text/javascript"> 
    $('ul.pagination').hide(); 
    $(function() { 
     $('document').ready(function(){ 
     $('.infinite-scroll').jscroll({ 
      autoTrigger: true, 
      debug: true, 
      loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />', 
      padding: 0, 
      nextSelector: '.pagination li.active + li a', 
      contentSelector: '.infinite-scroll', 
      callback: function() { 
       $('ul.pagination').remove(); 
      } 
     }); 


     }); 
    }); 
</script>