title: Back button with JavaScript/jQuery
body: <p>I have two identical HTML pages (<strong>index.html</strong> and <strong>page1.html</strong>) that contain two buttons:</p>
  
  <pre><code>&lt;ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"&gt;
      &lt;li class="ui-body ui-body-b ui-li-static ui-body-inherit ui-last-child"&gt;
          &lt;fieldset class="ui-grid-a"&gt;
              &lt;div class="ui-block-a"&gt;
                  &lt;button id="submit" type="submit" class="ui-btn ui-btn-a ui-corner-all"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="ui-block-b"&gt;
                  &lt;button id="cancel" data-direction="reverse" type="submit" class="ui-btn ui-btn-a ui-corner-all"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/fieldset&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Where one button changes to the second page, and the second button acts like a back button. (Ideally, you can use the first button to get to the second page, and then use the back button on the second page to get back to the first.)</p>
  
  <p>I control this using JavaScript (this only pertains to the <strong>index.html</strong> buttons, but the <strong>page1.html</strong> JS is identical):</p>
  
  <pre><code>$(document).on('click', '#submit', function() {
      $(":mobile-pagecontainer").pagecontainer("change", "page1.html",  {
          transition: 'slide',       
          changeHash: true
      });
  });
  
  $(document).on('click', '#cancel', function() {
      parent.history.back();
      //$.mobile.back();
  });
  </code></pre>
  
  <p>But nothing I try seems to work. I know that the program reaches the <code>parent.history.back();</code> because I've set break points in the console, but other than that I have no idea why it will not return to the first page.</p>