Why are Ajax pages not working with pushstate framework 7 v5?

Question

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.

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.

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();
              
            }
          });
        }

Any input appreciated thank you