我创建了以下示例来展示我正在经历的事情。
如果我使用 Page 2a 按钮从第 1 页导航到第 2 页,则 URL 将是 ...#page2?id=a 正如预期的那样。
当我单击按钮返回第 1 页,然后导航到第 2b 页时,URL 仍将显示“#page2?id= a ”,但<a>
标签显然有一个“#page2?id= b ”的 href当我到达#page2 时 ,它$(e.target).attr("data-url")
是“#page2?id= b ”。
有什么想法吗?提前感谢您的帮助。
<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>
代码示例也在jsfiddle 上。