metafizzy / infinite-scroll

📜 Automatically add next page
https://infinite-scroll.com
7.41k stars 1.74k forks source link

Multiple items on change event #959

Open ieraora opened 2 years ago

ieraora commented 2 years ago

Hi. I try to implement Infinite Scroll - Loading JSON + Masonry. I want run it in document.ready, but also when a dropdown change. So, based to this example I group all js in a function..

function masloadinf(){ var $grid = $('.grid').masonry({ ect ect ect. }

And use it in

$(document).ready(function(){ masloadinf(); });

and

$('#filtro_immagini').on("change",function(){ $('.grid').infiniteScroll('destroy'); $('.grid').masonry('destroy'); $('.infinite-scroll').remove(); masloadinf(); });

In document.ready, all good, no problem, But whet i change dropdown, I see items group just two times, If I chege also, I see items group three times, four times and other...

immagine

I undestand that error is here...

$grid.on( 'load.infiniteScroll', function( event, response ) { console.log( response ) // parse response into JSON data var data = JSON.parse( response ); // compile data into HTML var itemsHTML = data.map( getItemHTML ).join(''); // convert HTML string into elements var $items = $( itemsHTML ); // append item elements $items.imagesLoaded( function() { $grid.infiniteScroll( 'appendItems', $items ) .masonry( 'appended', $items ); }) });

In fact, if I don't use function masloadinf but copy code, in document.ready all code and in on.change, commented this code, all is fine.

I now ask what is the best solution to disable this code in on.change event without copy all code, so keeping the function.

Thank you.