waypoint infinite scroll only adds more data once

Question

1) I'm using jquery waypoint plugin and trying to do infinite scroll with php/mysql data. I initially populate the container, which works, and then when scroll to bottom of page the "More" link appends more data. But... it only appends one time. I'm guessing I need to use a callback to re-enable or something? But, total noob, don't know how to do this.

2) What is a good way to let load-more.php know what "page" we're on? Just use a session var to keep track, or is there a way to send param from the main file?

div class="infinite-container">
<?
include("load-more.php");
?>
</div>

<a href="load-more.php" class="infinite-more-link">More</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  </script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-infinite.js"></script>
<script>
$( document ).ready(function() {
     $('.infinite-container').waypoint('infinite');
}); 
</script>

Answer 1

If your problem is the same as mine then your issue is likely due to 'waypoint' not being able to find your .infinite-more-link. My "load-more.php" was returning a partial result and not the whole page. waypoint uses JQuery.find to try and locate the more-link in your html, if it cannot find it then it turns off infinite scroll. The problem with this is that find only looks amongst descendants and not at root elements. I wrapped my infinite-more-link in a span tag and waypoint worked as expected.

eg

<span><a href="load-more.php" class="infinite-more-link">More</a></span>

Here is a working fiddle , remove the div around the anchor to replicate your problem.