Ajax pages not working in pushstate v5

Hi
I’m facing an issue, hope someone helps
I have pages of classes eg. Events, decorations, etc and I’m using desktop layout (admin dashboard template which allows me to stack pages) my issue comes when I stack ajax pages …in press back or back browser button… previous page fails to fetch data from url.

Path: ‘/events/’,
Url: './pages/events.php,
on:{
pageInit: function (e, page) {

      // do something on page init
		  $(document).ready(function(){
		 $('#cat_select').html(function(e) {
			var cat = $(this).data('auto-id');
			load_data(1);
			function load_data(page, query = '')
			{
			  $.ajax({
				url:"pages/fetch-events.php",
				method:"GET",
				data:{page:page, query:query, cat:cat},
				beforeSend: function(data) { 
				  $('#events_content').html('<div class="col"><center><img src="img/mloader.gif" alt=""></center></div>').fadeIn();
				},
				success:function(data)
				{
				  $('#events_content').html(data).fadeIn();
				  
				}
			  });
			}

Pushstate works if I press back before going to next page on each.
I’m new to f7, if there is a way to close current page before going to next page or make ajax page fetch data for previous page.

Any input appreciated thank you