title: Jquery mobile panel stops working after navigation between pages in multi page template
body: <p>In a multi page template setup in a jquery mobile application after leaving the first page via  panel navigation. When returning to the first page via another form of navigation the panel looks "hanged".</p>
  
  <p>Looking closely you can see a small shadow to the left which is the hidden panel. The button to show the panel does no longer work.</p>
  
  <p>Here is a demo that replicates the problem.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  
      &lt;title&gt;Panel Issue Demo&lt;/title&gt;
  
  
      &lt;link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div data-role="page" id="one"&gt;
          &lt;div data-role="header" data-position="fixed"&gt;
              &lt;h1&gt;One&lt;/h1&gt;
              &lt;a href="#one-menu" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left"&gt;Menu&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div role="main" class="ui-content"&gt;
          &lt;/div&gt;
  
          &lt;div data-role="panel" data-position="left" data-display="overlay" data-theme="a" id="one-menu"&gt;
              &lt;ul class="ui-listview ui-alt-icon ui-nodisc-icon" data-role="listview"&gt;
                  &lt;li&gt;&lt;a href="#two" data-ajax="false"&gt;Two&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div data-role="page" id="two"&gt;
          &lt;div data-role="header" data-position="fixed"&gt;
              &lt;h1&gt;Two&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div role="main" class="ui-content"&gt;
              &lt;a href="#one" data-ajax="false"&gt;One&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>The steps to replicate are simple:</p>
  
  <ol>
  <li>Open panel and click "Two"</li>
  <li>Click "One"</li>
  <li>Panel is now broken.</li>
  </ol>
  
  <p>Does anyone know what might be causing this?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/jVzNk/" rel="nofollow">http://jsfiddle.net/jVzNk/</a></p>