title: JQuery Mobile: After changePage navbar is not working on target page until I manually refresh the browser
body: <p>I have the problem that the navbar is not working on the target page (login.php), after changePage has been invoked from the login page (index.php).</p>
  
  <p>I have 3 files</p>
  
  <ol>
  <li>index.php - Login Mask</li>
  <li>login.js - Contains the changePage</li>
  <li>login.php - Contains the navbar that is not working</li>
  </ol>
  
  <p>This is index.php:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scal=1" /&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /&gt;
    &lt;link rel="stylesheet" href="css/custom.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/login.js"&gt;&lt;/script&gt;
   &lt;/head&gt; 
   &lt;body&gt;
    &lt;div id="page" data-role="page"&gt;  
     &lt;div id="header" data-role="header"&gt;
      &lt;h1&gt;
       Carpooling
      &lt;/h1&gt;
     &lt;/div&gt;
     &lt;div id="content" data-role="content"&gt;
      &lt;form&gt;
       &lt;div id="loginForm"&gt;
        &lt;h2&gt;
         Login
        &lt;/h2&gt;
        &lt;div id="usernameDiv" data-role="field-contain"&gt;
         &lt;input type="text" name="username" placeholder="Username" id="username" /&gt;
        &lt;/div&gt;
        &lt;div id="passwordDiv" data-role="field-contain"&gt;
         &lt;input type="password" name="password" placeholder="Password" id="password" /&gt;
        &lt;/div&gt;
        &lt;div id="loginButtonDiv" data-role="field-contain"&gt;
         &lt;button name="login" type="submit" data-inline="true"&gt;
          Login
         &lt;/button&gt;
        &lt;/div&gt; 
       &lt;/div&gt;
      &lt;/form&gt;
     &lt;/div&gt;  
     &lt;div id="footer" data-role="footer"&gt;
      &lt;h1&gt;
       Copyright &amp;copy; Bj&amp;ouml;rn Karpenstein
      &lt;/h1&gt;
     &lt;/div&gt;    
    &lt;/div&gt;   
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is login.js:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$(function() {
     $('form').submit(function(){
    if(validateUsername() &amp;&amp; validatePassword())
    {
     $.post("services/auth.php", $('form').serialize(), function(response) {
      if (response == 'true')
      {
        showSuccess('You will be redirected in a moment!');
        setTimeout(function(){
         $.mobile.changePage('login.php', {transition: "slide", reloadPage: true, changeHash: false});
        }, 2000);
      }
      else
      {
        showError(response);
      }
     });
    }
    
    function validateUsername() {
     if($('#username').val().length === 0)
     {
      showError('The Username can not be empty!');
      return false;
     }
     else
     {
      return true;
     }
     
     return false;
    }
    
    function validatePassword() {
     if($('#password').val().length === 0)
     {
      showError('The Password can not be empty!');
      return false;
     }
     else
     {
      return true;
     }
     
     return false;   
    }  
    
    function showSuccess(message){
     $('&lt;div class="ui-loader ui-overlay-shadow ui_body_success ui-corner-all"&gt;&lt;h1&gt;'+message+'&lt;/h1&gt;&lt;/div&gt;').css({ "display": "block", "opacity": 0.96, top: $(window).scrollTop() + 100 })
      .appendTo( $.mobile.pageContainer )
      .delay( 2000 )
      .fadeOut( 400, function(){
      $(this).remove();
     });
    }
  
    function showError(message){
     $('&lt;div class="ui-loader ui-overlay-shadow ui_body_error ui-corner-all"&gt;&lt;h1&gt;'+message+'&lt;/h1&gt;&lt;/div&gt;').css({ "display": "block", "opacity": 0.96, top: $(window).scrollTop() + 100 })
      .appendTo( $.mobile.pageContainer )
      .delay( 2000 )
      .fadeOut( 400, function(){
      $(this).remove();
      });
    }
      
    return false; 
   });
   });</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is login.php:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
   // ob_start();
   include_once('../services/session.php');
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;!-- Ohne den viewort ist es wie ne Desktopanwendung --&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /&gt;
    &lt;link rel="stylesheet" href="css/custom.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/login.js"&gt;&lt;/script&gt;
   &lt;/head&gt; 
   &lt;body&gt;
    &lt;div id="page" data-role="page"&gt;
     &lt;div id="header" data-role="header"&gt;
      &lt;h1&gt;
       Fahrtenliste
      &lt;/h1&gt;
     &lt;/div&gt;
     &lt;div id="content" data-role="content"&gt;
      &lt;p&gt;
       This is index
      &lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="footer" data-role="footer" data-position="fixed"&gt;
      &lt;div data-role="navbar"&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="login.php" data-icon="grid"&gt;List rides&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#add_ride" data-icon="plus" data-rel="dialog"&gt;Add ride&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#list_users" data-icon="grid"&gt;List users&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#add_user" data-icon="plus"&gt;Add user&lt;/a&gt;&lt;/li&gt;      
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div id="add_ride" data-role="dialog"&gt;
     &lt;div id="header" data-role="header"&gt;
      &lt;h1&gt;
       Add ride
      &lt;/h1&gt;
     &lt;/div&gt;
     &lt;div id="content" data-role="content"&gt;
      &lt;div id="rideForm"&gt;
       &lt;label for="fahrtUserName"&gt;Ride creator &lt;?php echo $_SESSION['user_email']; ?&gt;&lt;/label&gt;
       &lt;div id="fahrtUserName" data-role="field_contain"&gt;
        &lt;input type="text" name="fahrt_username" value="&lt;?php 
          echo $_SESSION['user_email']." &lt;-&gt; ";
          if(!isset($_SESSION['user_email']))
          {
           echo "Die session hatja nix";
          } 
        ?&gt;" readonly="readonly" id="fahrt_username" /&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt; 
    
    &lt;div id="list_users" data-role="page"&gt;
     &lt;div id="header" data-role="header"&gt;
      &lt;h1&gt;
       List users
      &lt;/h1&gt;
     &lt;/div&gt;
     &lt;div id="content" data-role="content"&gt;
      &lt;p&gt;
       List users
      &lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="footer" data-role="footer" data-position="fixed"&gt;
      &lt;div data-role="navbar"&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="login.php" data-icon="grid"&gt;List rides&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#add_ride" data-icon="plus"&gt;Add ride&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#list_users" data-icon="grid"&gt;List users&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#add_user" data-icon="plus"&gt;Add user&lt;/a&gt;&lt;/li&gt; 
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt; 
    
    &lt;div id="add_user" data-role="page"&gt;
     &lt;div id="header" data-role="header"&gt;
      &lt;h1&gt;
       Add user
      &lt;/h1&gt;
     &lt;/div&gt;
     &lt;div id="content" data-role="content"&gt;
      &lt;p&gt;
       Add user
      &lt;/p&gt;
     &lt;/div&gt;
     &lt;div id="footer" data-role="footer" data-position="fixed"&gt;
      &lt;div data-role="navbar"&gt;
       &lt;ul&gt;
        &lt;li&gt;&lt;a href="login.php" data-icon="grid"&gt;List rides&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#add_ride" data-icon="plus"&gt;Add ride&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#list_users" data-icon="grid"&gt;List users&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="login.php#add_user" data-icon="plus"&gt;Add user&lt;/a&gt;&lt;/li&gt; 
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;   
    
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>