Infinite scroll is loading several times per request #803
Description
Hi, I am using the plugin and its totally fine until I tried something different.
On single page its working fine. But i want to use Pills like design.
I have 4-8 tabs (as categories) and single container. Whenever I switch tabs I used to delete all the data and and reinitialize the plugin. but with each click the initialisation is getting increased by one.
You can check the behaviour here. http://revamp.sillypicks.com/
Click on any category tab and look an eye on console window. You will see the category name being echoed 3-4 times on single click. Suppose if you click funny tab for first time, you will see 2 times funny echoing in console, try switching to some other tab and come back to funny again and you will see funny echoing 4 times on single line.
Try switching the any 2 categories tab back and forth. and see the network and results in console log.
Bellow is the JS code.
var $grid = $('#test7 .images-container');
function loadData(id){
// get Masonry instance
var msnry = $grid.data('masonry');
$container = $grid.infiniteScroll({
// options
path: function(res) {
console.log(id)
var pageNumber = ( this.loadCount + 1 );
return '/filter/'+id+'/'+ pageNumber;
},
history: false,
responseType: 'text',
outlayer: msnry
});
$container.on( 'load.infiniteScroll', function( event, response ) {
// parse response into JSON data
var res = JSON.parse( response );
console.log(res);
// compile data into HTML
img_block(res);
// load initial page
});
$container.infiniteScroll('loadNextPage');
}
loadData("all-pictures");
img_block = function(res){
var items = "";
$.each(res.data, function(key, val){
items = '\
<a style="color: #23527c;" href="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/pictures/'+val.slug+'" class="pic">\
<div class="masonryImage gallery-item gallery-expnd">\
<div class="placeholder">\
<div class="gallery-curve-wrapper">\
<div class="gallery-cover gray">\
<img src="'+val.image.url+'" class="img-responsive" crossorigin="anonymous" />\
</div>\
</div>\
<div class="score-chip">\
<span class="score-box"><b>'+val.likes+'</b><br><small>Score</small> </span>\
</div>\
</div>\
</div>\
</a>';
// append item elements
$grid.append(items);
$grid.imagesLoaded( function(){
$grid.masonry({
itemSelector : '.masonryImage',
columnWidth: '.masonryImage'
});
});
$grid.masonry('reloadItems');
});
return items;
}
$(".pin-top li:not(:first-child)").on("click", function(){
var id = $(this).attr("id");
$grid.html(null);
$grid.infiniteScroll('destroy');
$grid.data('infiniteScroll', null);
loadData(id);
});