I am trying to create an 'infinite scroll' using Ajax (or rather specifically using Jquery's .load function), the function fires perfectly and in the instances where it has worked it spits out a comical amount of articles, so I figured that I should create a unique, iterating div (id1,id2,id3 etc) but when using an iterating selector to load the Ajax content into unique div ids, by iterating it, it .load fails or doesn't fire.
var busy = false;
var i = 1;
var x = 0;
function content(){
if($(document).height() * 0.7 < $(document).scrollTop() && !busy) {
var offset = i++ * 6;
$("#expand").after("<section id='expand" + x++ + "' class='gridWrapper'></section>");
$("#expand" + x).load("/ajaxcontent/", {section: 'articles', category: '', limit: '6', offset: offset, form: 'grid', action: 'article'}, function(){
busy = true;
});
x++
} else {
busy = false;
}
}
window.onscroll = content;
document.ready = content;
My question is how do I get the selector $("#expand" + x) to work correctly? In the variations (for loops, while loops, .each) I have tried where it does output articles it goes utterly bananas and essentially regurgitates all articles. Any help would be hugely appreciated!
(As it is a an Ajax load, I don't think that I can create a JsFiddle)
