So, I am following the tutorial to implement infinite scroll: /

In my footer, I added <script type="text/javascript" src=".infinitescroll.min.js"></script>

In the javascript.js file, I added the following (identical to the tutorial):

 // infinitescroll() is called on the element that surrounds 
 // the items you will be loading more of
  $('#content').infinitescroll({

   navSelector  : "div.navigation",            
               // selector for the paged navigation (it will be hidden)
   nextSelector : "div.navigation a:first",    
               // selector for the NEXT link (to page 2)
   itemSelector : "#content div.post"          
               // selector for all items you'll retrieve
 });

However, I am getting Uncaught TypeError: jQuery(...).infinitescroll is not a function error.

So, I added the js file and added the script pretty much identical to the tutorial. I can see that both js file and scripts are shown on the page, but still getting the error.

Could someone help me why I am getting an error?

Thanks!

So, I am following the tutorial to implement infinite scroll: http://www.infinite-scroll./infinite-scroll-jquery-plugin/ment-page-3/

In my footer, I added <script type="text/javascript" src="http://example./js/jquery.infinitescroll.min.js"></script>

In the javascript.js file, I added the following (identical to the tutorial):

 // infinitescroll() is called on the element that surrounds 
 // the items you will be loading more of
  $('#content').infinitescroll({

   navSelector  : "div.navigation",            
               // selector for the paged navigation (it will be hidden)
   nextSelector : "div.navigation a:first",    
               // selector for the NEXT link (to page 2)
   itemSelector : "#content div.post"          
               // selector for all items you'll retrieve
 });

However, I am getting Uncaught TypeError: jQuery(...).infinitescroll is not a function error.

So, I added the js file and added the script pretty much identical to the tutorial. I can see that both js file and scripts are shown on the page, but still getting the error.

Could someone help me why I am getting an error?

Thanks!

• javascript
• jquery

• have you added jquery.infinitescroll.js correctly after jquery.js on to your page – vijayP Commented Aug 27, 2015 at 8:38
• The function may be getting executed before the library has time to load. To ensure this doesn't happen wrap all of your code around $(function() { //code goes here... }) – Joshua Terrill Commented Aug 27, 2015 at 8:47

3 Answers 3

You should make sure your initialization code is inside a $(function(){}), because you need the DOM to be ready before running infinitescroll. Then you have to make sure there is an element with id="content" in your page. So, make sure you have something like this:

<div id="content">...</div>

<script src="jquery.infinitescroll.js"></script>

<script>
$(function() {
 // infinitescroll() is called on the element that surrounds 
 // the items you will be loading more of
  $('#content').infinitescroll({

   navSelector  : "div.navigation",            
               // selector for the paged navigation (it will be hidden)
   nextSelector : "div.navigation a:first",    
               // selector for the NEXT link (to page 2)
   itemSelector : "#content div.post"          
               // selector for all items you'll retrieve
 });
});
</script>

Did you add the plugin file in the page header?

You have to download it from the plugin page you have provided and add it as:

<script src="jquery.infinitescroll.js"></script>

in the head section of the page after the script tag where you load jQuery Please adapt the src to the path to the directory you have placed the js into.

If you use webpack then use this code

var InfiniteScroll = require('infinite-scroll');

var infScroll = new InfiniteScroll('.container', {
  // options
  path: ".pagination__next",
  append: ".post",
  history: false
});