title: jquery mobile refreshing dynamically loaded page
body: <p>I have page1 which is index.html, it a self-contained website includes header and scripts ect. I have a button on this page that when clicked will load page2 via ajax and insert page2 into page1. Page2 is just the div data-role="page" and html within it, its not a self-contained page. However, the url changes to page2.html and then if I "refresh" the page it doesn't load a complete page because page2 is not a full page, it was only ment to be injected into page1. </p>
  
  <p>I tried setting the data-url="index.html&amp;dashboard" (dashboard is the main id on page2) and in this case the url looks correct as it is still index.html&amp;dashboard so a page refresh reloads page1 even if you were on page2. But now, jquery freaks out and sits on a loading screen forever because it can't find "dashboard" because that content was only added after the user clicked a button.</p>
  
  <p>How do I work around this?</p>
  
  <p>Thanks.</p>
  
  <p><strong>page1 index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;title&lt;/title&gt;
  &lt;script&gt;&lt;script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/global.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/login.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  
  &lt;script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" charset="utf-8" src="js/login.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="page" data-theme="b"&gt;
  
          &lt;div data-role="header" data-theme="b"&gt;
              &lt;h1&gt;Login&lt;/h1&gt;
          &lt;/div&gt;
          &lt;!-- /header --&gt;
  
          &lt;div data-role="content"&gt;
              &lt;div class="row"&gt;
                  &lt;label for="login_name"&gt;Login Name:&lt;/label&gt; &lt;input
                      class="ui-input-text" type="text" name="login_name" id="login_name" /&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;label for="basic"&gt;Password:&lt;/label&gt; &lt;input class="ui-input-text"
                      type="password" name="password" id="password" /&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;input type="checkbox" name="remember" id="remember" class="custom"
                      data-mini="true" /&gt; &lt;label for="remember"&gt;Remember Me&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;input type="submit" id="submit" name="submit" value="Submit" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /content --&gt;
  
      &lt;/div&gt;
      &lt;!-- /page --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>page2 dashboard.html</strong></p>
  
  <pre><code>&lt;div id="dashboard" data-role="page" data-theme="b" data-url="index.html&amp;dashboard"&gt;
  
  &lt;div data-role="header" data-theme="b"&gt;
      &lt;h1 id="page_title"&gt;Dashboard&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>login.js</strong></p>
  
  <pre><code>$(function() {
  
  
  $("#submit").click(function() {
  
      if ($("#login_name").val() == "") {
          alert("Please enter a login name");
          return false;
      }
  
      if ($("#password").val() == "") {
          alert("Please enter a password");
          return false;
      }
  
      $.post(URL + 'login', {
          'APIKEY' : APIKEY,
          'login' : $("#login_name").val(),
          'password' : $("#password").val()
      }, function(data) {
          if (data.error == "") {
  
              $.mobile.changePage("dashboard.html", { transition : "slide" });
          } else {
              alert(data.error);
          }
  
      }, "json");
  
  });
  </code></pre>
  
  <p>});</p>