我已经玩了几周的jQuery和jQuery mobile。我有一个非常简单的例子，它似乎表明一个非常讨厌的jQuery移动bug，所以我想看看是否有一些我正在做的事情是错的。
发生的事情是我有一个页面（称之为index2.html）作为主页。然后我有第二页（dc2.html），这是webapp的主要功能所在的位置。 dc2.html是一个多页面模板;即它包含两个声明data-role =“page”的div。正如您可能猜到的，在dc2.html中我提供了从第一个“page”div到第二个“page”div的链接，反之亦然。
如果我直接在我的浏览器中手动输入dc2.html的网址，那么此互动可以正常工作。但是，如果我从index2.html开始并按照其链接到dc2.html，那么我点击/点击链接加载第二个'data-role =“page”'div，浏览器改为对index2进行网络调用.html并再次加载！
如果重要，网址就像 www.XXXX.com/software_utilities/mobile/index2.html 和 www.XXXX.com/software_utilities/mobile/dc2.html < / strong>，因此它们位于嵌套文件夹中，尽管两者都在同一个嵌套文件夹中。
以下是index2.html的代码（当然是为了演示此问题的基本内容）：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page">
<div data-role="header">
<h1>Utilities</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d">
<li><a href="/software_utilities/mobile/dc2.html">DC</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
和dc2.html的代码：
<!DOCTYPE html>
<html>
<head>
<title>Date Format</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of main page -->
<div data-role="page" id="main">
<div data-role="header">
<a href="index2.html" data-direction="reverse" data-role="button" data-inline="true">Home</a> <h1>Page One</h1>
</div><!-- /header -->
<div data-role="content">
<a href="#page_two">Click/tap me to go to page 2</a>
</div><!-- /main content -->
</div><!-- /main page -->
<div data-role="page" id="page_two">
<div data-role="header">
<a href="#main" data-direction="reverse" data-role="button" data-inline="true">Back</a> <h1>Page Two</h1>
</div><!-- /header -->
</div><!-- /dateformat page -->
</body>
</html>
任何见解都会受到高度赞赏;谢谢！
答案 0 :(得分：3)
我还没有尝试过您正在使用的流程，但我相信当您点击index2.html上有关dc2.html页面的链接时，只会将第一个<div data-role="page">添加到DOM中。因此，当您点击dc2.html中第二个伪页面的链接时，它在DOM中不存在（即没有id为“page_two”的div。）
尝试将所有三个页面放在一个文件中，或者将它们全部拆分为单独的文件。您还可以将rel="external"添加到index2.html上的链接，这将禁用AJAX导航（和页面转换动画），但浏览器会在dc2.html上加载两个伪页面。