javascript not firing following AJAX page transition

javascript not firing following AJAX page transition

This is getting a bit frustrating. I've seen quite a few answers regarding pageinit, pagebefore, etc, but I am not having any luck.

I am developing a little web game, that requires a user_id and which displays many unique variables on each page.  As such, getting javascript to work (all the time) is vital to a smooth user experience.

Due to the dynamic set up, I have a 'main' template which sets up the page and loads content into it through codeigniter (php). 

  1. <!DOCTYPE html> 
  2. <html>      
  3. <?php echo $head ?>
  4. <body>
  5. <div data-role="page" data-add-back-btn="true" id="main">
  6.     
  7.     <div data-id="pageheader" class="ui-body-d" data-role="header" data-add-back-btn="true" data-position="fixed">
  8.         <?php echo $header ?>
  9.     </div>

  11.     <div data-role="content">
  12.         <?php echo $scripts ?>
  13.         <?php echo $notification_list ?>
  14.         <?php echo $content ?>
  15.     </div>
  16.     
  17.     <div data-role="panel" id="navpanel" data-position="left" data-display="push" data-position-fixed="true" data-dismissible="true" data-theme="a">        
  18.         <?php echo $nav ?>
  19.     </div>
  20.     
  21.     <div data-role="footer" class="ui-body-c" data-id="footer" data-position="fixed">
  22.         <?php echo $footer ?>
  23.     </div>
  24. </div>
  25. </body>
  26. </html>

I load a php 'scripts' page into the content section; so every time a new content area is loaded, the scripts are loaded. This works, 'most' of the time. 

However, there are 2 main scenarios that mess this up, which I'm hoping (:D) someone will be able to help me with:

1. When I load a page through a link (not through a refresh), I lose the ability to 'swipe' and open a menu:

  1. $(document).on('pagebeforeshow', '#main', function(){           
  2.         $( document ).on( "swiperight", "#main", function( e ) {
  3.         // We check if there is no open panel on the page because otherwise
  4.         // a swipe to close the left panel would also open the right panel (and v.v.).
  5.         // We do this by checking the data that the framework stores on the page element (panel: open).
  6.         if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
  7.             if ( e.type === "swiperight" ) {
  8.                 $( "#navpanel" ).panel( "open" );
  9.             }
  10.         }
  11.     });
  12. });
If I manually refresh the page, I can swipe.  Though, when the content is loaded through ajax, I lose that ability.

2. I have a notification system in place.  After a user makes an action, an ajax call is made and it displays a notification on the screen.  The user can then "$().hide" the notification, which then uses AJAX to remove it from the database, so all future page loads, the navigation item won't be loaded.  However, because jquery stores pages, when they navigate to and from pages they've already visited, this notification that should be hidden, remains (because the page doesn't grab new information.

Is there a way to continue using AJAX page loading, but force it to continually grab new information each time a user clicks a link?

Thanks for the help in advance!