jQuery uncaught TypeError: Infinite scroll

Question

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

In my footer, I added <script type="text/javascript" src="http://example.com/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!

Answer 1

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>

Answer 2

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.