title: Two pages are "merged" together if include jQuery Mobile in 1st page
body: <p>I have a very simple HTML two page demo that ilustrates a very confusing behavior in jQuery Mobile 1.1.0.  (The real app is much more complicated but I've been able to "massively" simplify the problem.)</p>
  
  <p>Page 1 consists of a single href to jump to Page 2.  If Page 1 does <em>NOT</em> include jQuery Mobile 1.1.0 we can click on the link and Page 2 is displayed with no errors.  However, if Page 1 includes jQuery Mobile 1.1.0, a click on the link in Page 1 results in a Page that is a <em>combination of the HTML in Page 1 and Page 2</em>!  That is, Page 1 is retained and Page 2 is "merged" into it.  I have tried this with both the regular and the minified versions with the same result.  The two pages are as simple as an HTML page can get so it should be very easy to reproduce this with the samples below.  This is running with Tomcat 5.5 (and if it matters, being managed and laumched out of Eclipse).  The two HTML files and the two jQuery Mobile files are all placed in a folder at the server's document root.  (The browser output below is from running through Tomcat, but I just tried this by launching the browser directly off of the Page1.html file  - no server involved at all - and the problem persists, so this can be reproduced without a server being involved.)</p>
  
  <p>The following shows the file contents for Page1 and Page 2, along with the HTML that is seen in the desktop Firefox browser (in Firebug).</p>
  
  <p><em>*</em> PAGE 1 SOURCE HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Remove jQuery Mobile and Page 2 is displayed properly. --&gt;
  &lt;script src="jquery.mobile-1.1.0.min.js" &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body &gt;
  &lt;a href="Page2.html"&gt;Click for Page 2&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>RESULTING PAGE 1 HTML IN THE BROWSER:</p>
  
  <pre><code>&lt;html lang="en" class="ui-mobile"&gt;&lt;head&gt;&lt;base href="http://localhost/MyServer/DemoBadJQM/Page1.html"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
  &lt;title&gt;&lt;/title&gt;&lt;/head&gt;
  &lt;body class="ui-mobile-viewport ui-overlay-c"&gt;&lt;div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 521px;"&gt;
  &lt;a href="Page2.html" class="ui-link"&gt;Click for Page 2&lt;/a&gt;
  &lt;/div&gt;&lt;div class="ui-loader ui-corner-all ui-body-a ui-loader-default"&gt;&lt;span class="ui-icon ui-icon-loading"&gt;&lt;/span&gt;&lt;h1&gt;loading&lt;/h1&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>PAGE 2 SOURCE HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body &gt;
  This is from PAGE 2 BODY!!!
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>RESULTING PAGE 2 HTML IN THE BROWSER:</p>
  
  <pre><code>&lt;html lang="en" class="ui-mobile"&gt;&lt;head&gt;&lt;base href="http://localhost/MyServer/DemoBadJQM/Page2.html"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Remove jQuery Mobile and Page 2 is displayed properly. --&gt;
  &lt;script src="jquery.mobile-1.1.0.js"&gt;&lt;/script&gt;
  &lt;title&gt;&lt;/title&gt;&lt;/head&gt;
  &lt;body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"&gt;&lt;div data-role="page" data-url="/MyServer/DemoBadJQM/Page1.html" tabindex="0" class="ui-page ui-body-c ui-page-active fade out" style="min-height: 521px; height: 522px;"&gt;
  &lt;a href="Page2.html" class="ui-link"&gt;Click for Page 2&lt;/a&gt;
  &lt;/div&gt;&lt;div class="ui-loader ui-corner-all ui-body-a ui-loader-default"&gt;&lt;span class="ui-icon ui-icon-loading"&gt;&lt;/span&gt;&lt;h1&gt;loading&lt;/h1&gt;&lt;/div&gt;&lt;div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c"&gt;
  This is from PAGE 2 BODY!!!
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>Note that, with jQuery Mobile included in Page 1:</p>
  
  <p>"Page 2", which had no  content, contains the  content of Page 1.</p>
  
  <p>"Page 2" contains the href and the "loading" elements from Page 1.</p>
  
  <p>"Page 2" finally includes the simple text from the  in the Page 2 HTML file.</p>
  
  <p>The page that results from clicking the link in Page 1 appears to be Page 1 with Page 2's  appended.  Drop jQuery Mobile from Page 1 and the problem is gone.  It is purely a guess, but jQuery Mobile displays a "loading" message while the next page is being fetched and it appears that the act of doing this somehow prevents the browser from "disposing" of Page 1 and it instead merges the incoming Page 2 with the prior Page 1.</p>
  
  <p>Can anyone explain what is happening here?</p>
  
  <p>Thanks.</p>