javascript $.mobile.changePage 在多页中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11857780/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$.mobile.changePage not working properly in multipage
提问by PPD
Hi all I am navigating from index.html to test.html as $.mobile.changePage("test.html", {transition : "slide"});which works fine. But in my test.html there are multiple html pages in different div. In test.html I am calling different html page which is in different div in same html file (i.e.test.html ) as $.mobile.changePage("#secondtestPage", {transition : "slide"});But here it is not navigate to secondtestPage. My index.html is as:
大家好，我正在从 index.html 导航到 test.html，因为$.mobile.changePage("test.html", {transition : "slide"});它工作正常。但是在我的 test.html 中，不同的 div 中有多个 html 页面。在 test.html 中，我在同一个 html 文件（ietest.html）中调用不同 div 中的不同 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>
Now page navigate to test.html and my test.html looks as:
现在页面导航到 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>
But now on click of button it is not navigating to "callSecondPage". and if I call $.mobile.changePage("index.html", {transition : "slide"});then it navigate to index.html properly, then why in multipage changePage is not working? one more thing If I replace index.html code with test.html code then $.mobile.changePage("#secondtestPage", {transition : "slide"});works perfectly.
但是现在单击按钮它不会导航到“callSecondPage”。如果我调用$.mobile.changePage("index.html", {transition : "slide"});然后它正确导航到 index.html，那么为什么在多页 changePage 中不起作用？还有一件事如果我用 test.html 代码替换 index.html 代码然后$.mobile.changePage("#secondtestPage", {transition : "slide"});完美地工作。
I am confused why it is behaving like this? Any suggestion will be appreciated. Thanks in advance.
我很困惑为什么它会这样？任何建议将不胜感激。提前致谢。
回答by Derek Hunziker
jQuery Mobile will asynchronously load the contents of your test.htmlfile in order to transition to it. You have a callSecondPage()function defined within the same scope in both index.htmland test.htmlwhich is probably at fault. Try naming it something different in test.htmland report back.
jQuery Mobile 将异步加载您的test.html文件的内容以便转换到它。您callSecondPage()在index.html和test.html的同一范围内定义了一个函数，这可能有问题。尝试在test.html中将其命名为不同的名称并返回报告。
EDIT:
编辑：
OK, it turns out that jQuery Mobile does not actual load all of your other data-role="page" pages other than the first. If you inspect the DOM while transitioning from index.html to test.html, you'll notice the second, third and forth pages are missing.
好的，事实证明 jQuery Mobile 并没有真正加载除第一个页面之外的所有其他 data-role="page" 页面。如果您在从 index.html 转换到 test.html 时检查 DOM，您会注意到第二、第三和第四页丢失了。
This is from the jQuery Mobile documentation: http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html
这是来自 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.
需要注意的是，如果您要从通过 Ajax 加载的移动页面链接到具有多个内部页面的页面，则需要向链接添加rel="external"或data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。这很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史记录，而多个内部页面使用哈希来指示内部页面，因此会发生冲突。
回答by annasarp user
I added falsevalue to end of the method, which solved the problem:
我false在方法的末尾添加了值，从而解决了问题：
$.mobile.changePage("#secondtestPage", {transition : "slide"}, false);
