Multiple items on change event

[ieraora]

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...

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.