大家好，我正在从 index.html 导航到 test.html，方法是 $.mobile.changePage("test.html", {transition : "slide"});，效果很好。但是在我的 test.html 中，不同的 div 中有多个 html 页面。在 test.html 中，我将不同的 html 页面调用为 $.mobile.changePage("#secondtestPage", {transition : "slide"}); 但是这里没有导航到 secondtestPage。我的 index.html 如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Ins ide callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("test.html", {transition : "slide"});
}
</script>
</body>
</html>
现在页面导航到 test.html，我的 test.html 看起来像:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
</div>
<script type="text/javascript">
function callnewSecondPage()
{
alert ("Inside callPage");
//$.mobile.changePage('#secondPage');
$.mobile.changePage("#secondtestPage", {transition : "slide"});
//$.mobile.changePage("index.html", {transition : "slide"});
}
</script>
</div>
<div data-role="page" id="secondtestPage" onclick=callThirdPage() class="type-home" data-ajax="false" >
<div data-role="button">
<input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdtestPage');
}
</script>
</div>
<div data-role="page" id="thirdtestPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthtestPage');
}
</script>
</div>
<div data-role="page" id="fourthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
</div>
</div>
<div data-role="page" id="fifthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
</div>
</div>
<div data-role="page" id="sixthtestPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
</div>
</div>
</body>
</html>
但是现在单击按钮时它不会导航到“callSecondPage”。如果我调用 $.mobile.changePage("index.html", {transition : "slide"}); 然后它会正确导航到 index.html，那么为什么在多页中 changePage 不工作？还有一件事如果我用 test.html 代码替换 index.html 代码，那么 $.mobile.changePage("#secondtestPage", {transition : "slide"}); 工作得很好。
我很困惑为什么它会这样？任何建议将不胜感激。提前致谢。
最佳答案
jQuery Mobile 将异步加载您的 test.html 文件的内容，以便转换到它。您在 index.html 和 test.html 的同一范围内定义了一个 callSecondPage() 函数，这可能是错误的。尝试在 test.html 中将其命名为不同的名称并反馈。
编辑:
好的，事实证明 jQuery Mobile 不会实际加载除第一个页面之外的所有其他 data-role="page"页面。如果您在从 index.html 转换到 test.html 时检查 DOM，您会注意到第二、第三和第四页丢失了。
这是来自 jQuery Mobile 文档: http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html
It's important to note if you are linking from a mobile page that was loaded via Ajax to a page with multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be a conflicts.
关于javascript - $.mobile.changePage 在多页中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11857780/