为什么我无法从 secondary.html 导航到另一个内部页面 #page3 ？。
我能够从index.html导航到second.html。我的代码如下所示:
index.html 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', "#index",function () {
$(document).on('click', "#changePage",function () {
$.mobile.changePage('second.html', { dataUrl : "second.html?paremeter=123", data : { 'paremeter' : '123' }, reloadPage : false, changeHash : true });
});
});
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="index">
<div data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<a data-role="button" id="changePage">Test</a>
</div> <!--content-->
</div><!--page-->
</body>
</html>
第二个.html页面
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Home -->
<div data-role="page" id="second">
<script type="text/javascript">
alert("Inside the Second Page");
$(document).on('pagebeforeshow', "#second",function () {
//$(document).ready(function(e) {
var parameters = $(this).data("url").split("?")[1];
parameter = parameters.replace("parameter=","");
alert(parameter);
});
function move(){
alert("moving...");
$.mobile.changePage('#third');
alert("moved !!!");
}
</script>
<div data-role="header">
<h3>
Second Page
</h3>
</div>
<div data-role="content">
<a href="#third" onClick="move()" data-role="button">Go to Property Page</a>
</div> <!--content-->
</div><!-- second page-->
<div data-role="page" id="third">
<script type="text/javascript">
alert("Inside Third Page...");
</script>
</div>!-- third page-->
</body>
</html>
在 secondary.html 页面中，还显示了第二条警报消息，但页面导航从未发生？？？。谁能告诉我我在这里错过了什么或者我在这里做错了什么？
最佳答案
不幸的是，这是行不通的。这只是在 jQuery Mobile 中使用多个 HTML 模板解决方案的一个缺点。
基本上，如果您决定使用多个 HTML 页面，则只有第一个 HTML 可以包含多于 1 个页面，因为整个页面将加载到 DOM 中。
如果使用 ajax 加载页面(默认页面处理)，当第二个 html 加载到 DOM 中时，只会加载第一个页面，包括页面 HEAD 在内的所有其他页面都将被丢弃。
您可以执行以下两件事来解决此问题:
解决方案1
让您的第三个页面位于另一个 html 中，例如 third.html。
解决方案2
禁用 ajax 页面加载。这将完全加载 second.html，以便您可以切换到内部页面。不幸的是，您将丢失页面转换。
最后，如果你想了解更多，请看我的另一个答案: Why I have to put all the script to index.html in jquery mobile
关于jquery - 在 JQuery Mobile 中两个不同文件的三个页面之间导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16504799/