I am working on a site where I want to implement infinite scrolling. I found the IAS plugin, and it works great except in one instance. If I load new content into a div using the jQuery .load() function the infinite scrolling stops working.
<script type="text/javascript">
$(document).ready(function() {
var ias = $.ias({
container: '#load_here',
item: 'p',
pagination: '#nav',
next: '#nav a'
});
$("#reload").click(function(){
event.preventDefault();
$("#test").load( "page0.html #load_here", function() {
// Reinitialize the infinite scrolling here.
});
});
});
</script>
Here is the documentation for the IAS plugin: http://infiniteajaxscroll.com/docs/overview.html
I found the following questions that seem relevant, but there seem to me to be no clear answers--I apologize they're not links, Stack Overflow won't let me post more than 2 links:
stackoverflow.com/questions/24419462/
stackoverflow.com/questions/25205507/
stackoverflow.com/questions/20404493/
github.com/webcreate/infinite-ajax-scroll/issues/68
It talks about the destroy function, but in my attempts to come up with a solution that seems to do nothing at all. I am very much a hobbyist programmer, I fear I may simply not understand the structure or syntax necessary to implement this correctly.
I have a test page here
The infinite scroll loads pages 1, 2, and 3 successfully. If you click the link at the top to load page 0 using a jQuery .load() but then the infinite scrolling stops working. It should scroll down and load page 1, 2, and 3 again.
Thank you.