我创建了以下示例来展示我所经历的情况。
如果我使用“Page 2a”按钮从第 1 页导航到第 2 页，则 URL 将按预期为 ...#page2?is=a。
当我单击按钮返回第 1 页，然后导航到第 2b 页时，URL 仍会显示“#page2?id=a”，但是<a>标签显然有一个 href 为“#page2?id=b“ 随着$(e.target).attr("data-url")是“#page2?id=b“当我到达#page2时。
有什么想法吗？预先感谢您的任何帮助。
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$("#page2").live('pageshow', function(e) {
alert($(e.target).attr("data-url"));
$("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, "")));
});
</script>
</head>
<body>
<div data-role="page" data-theme="c" id="page1">
<div data-role="content">
<p>Page 1</p>
<a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a>
<a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a>
</div>
</div>
<div data-role="page" data-theme="a" id="page2">
<div data-role="content">
<p id="page_text"></p>
<a href ="#page1" data-transition="flip" data-role="button">Page1</a>
</div>
</div>
</body>
</html>
代码示例是here http://jsfiddle.net/UZM3B/2/也在 jsfiddle 上。
我能够通过使用解决这个问题jqm.page.params https://github.com/jblas/jquery-mobile-plugins/blob/master/page-params/jqm.page.params.js插件的帮助下this https://stackoverflow.com/questions/8238762/passing-parameters-to-a-page-id-in-jquery-mobile关于 stackoverflow 的问题。这是我使用这个插件的代码：
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
//Added the jqm.page.params plugin
<script src="https://raw.github.com/jblas/jquery-mobile-plugins/35fcf54e2af380aa0e98e9f384572b02f58a1ea1/page-params/jqm.page.params.js"></script>
<script>
$("#page2").live('pageshow', function(e) {
alert($(e.target).attr("data-url")+$.mobile.pageData.id);
//$("#page_text").html("Page 2"+($(e.target).attr("data-url").replace(/.*id=/, "")));
$("#page_text").html("Page 2"+$.mobile.pageData.id);
});
$(document).bind("pagebeforechange", function( event, data ) {
$.mobile.pageData = (data && data.options && data.options.pageData)
? data.options.pageData
: null;
});
</script>
</head>
<body>
<div data-role="page" data-theme="c" id="page1">
<div data-role="content">
<p>Page 1</p>
<a href ="#page2?id=a" data-transition="flip" data-role="button">Page 2a</a>
<a href ="#page2?id=b" data-transition="flip" data-role="button">Page 2b</a>
</div>
</div>
<div data-role="page" data-theme="a" id="page2">
<div data-role="content">
<p id="page_text"></p>
<a href ="#page1" data-transition="flip" data-role="button">Page1</a>
</div>
</div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
