我有一个非常简单的 HTML 两页演示，它说明了 jQuery Mobile 1.1.0 中一个非常令人困惑的行为。（真正的应用程序要复杂得多，但我已经能够“大量”简化问题。）
第 1 页包含一个跳转到第 2 页的 href。如果第 1 页不包含 jQuery Mobile 1.1.0，我们可以单击该链接，第 2 页显示没有错误。但是，如果页面 1 包含 jQuery Mobile 1.1.0，则单击页面 1 中的链接会生成一个页面，该页面是页面 1 和页面 2 中的 HTML 的组合！也就是说，第 1 页被保留，第 2 页被“合并”到其中。我已经尝试过常规版本和缩小版本，结果相同。这两个页面与 HTML 页面一样简单，因此使用下面的示例应该很容易重现这一点。这是使用 Tomcat 5.5 运行的（如果重要的话，可以从 Eclipse 中管理和启动）。这两个 HTML 文件和两个 jQuery Mobile 文件都放在服务器文档根目录的一个文件夹中。（下面的浏览器输出来自通过 Tomcat 运行，但我只是通过直接从 Page1.html 文件启动浏览器来尝试这个 - 根本不涉及服务器 - 问题仍然存在，因此可以在不涉及服务器的情况下重现.)
下面显示了 Page1 和 Page 2 的文件内容，以及在桌面 Firefox 浏览器（在 Firebug 中）中看到的 HTML。
*第 1 页来源 HTML：
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.min.js" ></script>
</head>
<body >
<a href="Page2.html">Click for Page 2</a>
</body>
</html>
在浏览器中生成第 1 页 HTML：
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page1.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c"><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;">
<a href="Page2.html" class="ui-link">Click for Page 2</a>
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div></body></html>
第 2 页来源 HTML：
<!doctype html>
<html lang="en">
<head></head>
<body >
This is from PAGE 2 BODY!!!
</body>
</html>
在浏览器中生成第 2 页 HTML：
<html lang="en" class="ui-mobile"><head><base href="http://localhost/MyServer/DemoBadJQM/Page2.html">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Remove jQuery Mobile and Page 2 is displayed properly. -->
<script src="jquery.mobile-1.1.0.js"></script>
<title></title></head>
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-fade"><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;">
<a href="Page2.html" class="ui-link">Click for Page 2</a>
</div><div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/OpsServer/DemoBadJQM/Page2.html" data-external-page="true" tabindex="0" class="ui-page ui-body-c">
This is from PAGE 2 BODY!!!
</div></body></html>
请注意，页面 1 中包含 jQuery Mobile：
没有内容的“第 2 页”包含第 1 页的内容。
“页面 2”包含页面 1 中的 href 和“加载”元素。
“Page 2”最终包含了 Page 2 HTML 文件中的简单文本。
单击第 1 页中的链接产生的页面似乎是第 1 页，并附加了第 2 页。从第 1 页删除 jQuery Mobile，问题就消失了。这纯粹是一种猜测，但 jQuery Mobile 在获取下一页时显示“正在加载”消息，并且这样做似乎以某种方式阻止浏览器“处理”第 1 页，而是合并传入的第 2 页与之前的第 1 页。
谁能解释这里发生了什么？
谢谢。