Data Load While Page Scrolling (infinite scroll) with jQuery PHP and MySQL - php

Question

I have infinite scroll and on top of this I have ( list of categories ) so when one of these buttons clicked the infinite scroll updated and new information loaded by ajax, after the data loaded the infinite scroll stop working
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '#events', // main container where data goes to append
item: '.items', // single items
pagination: '.event-nav', // page navigation
next: '.event-nav a', // next page selector
loader: '', // loading gif
triggerPageThreshold: 5 // show load more if scroll more than this
});
});
//Set up click filterBy event
$(document).on('click', '.filterBy' ,function (event) {
$( ".filterBy" ).removeClass('active');
$(this).addClass('active');
var url = '/rest/ajax/filter.json';
var divId = "event-category";
//Process button click event
loadAjax(this.id,url,divId);
});
//Set up click filterType event
$(document).on('click', '.filterType' ,function (event) {
$( ".filterType" ).removeClass('active');
$(this).addClass('active');
var url = '/rest/ajax/filterType.json';
var divId = "events";
//Process button click event
loadAjax(this.id,url,divId);
});
// JavaScript Document
function loadAjax(val,urlReq,divId)
{
$.ajax({
type: 'POST', // type of request either Get or Post
url: urlReq,// Url of the page where to post data and receive response
data: 'data='+val, // data to be post
beforeSend: function( xhr )
{
$( "#"+divId ).show();
$('html,body').animate({
scrollTop: $("#"+divId).offset().top
}, 1500);
$("#"+divId).html('loading.........');
},
success: function(data)
{
$("#"+divId).html(data);
} //function to be called on successful reply from server
});
}