jQuery Mobile url参数不会在浏览器中更新，而是通过& quot; data-url& quot;来获取正确的参数 [英] jquery mobile url parameter not updating in browser, but getting correct one with "data-url"
问题描述
我创建了以下示例以展示我的经历.
I created the following example to show what I am experiencing.
如果我使用页面2a从页面1导航到页面2，则URL将会如预期般为...#page2?id = a.
If I navigate from page1 to page 2 with the button Page 2a, the URL will be ...#page2?id=a as expected.
当我单击该按钮返回到第1页，然后导航到第2b页时，URL仍将显示#page2?id = a "，但是<a>标签很明显当我进入#page2时，其href值为#page2?id = b "，而$(e.target).attr("data-url")是#page2?id = b ".
When I click the button to go back to Page 1, then navigate to Page 2b, the URL will still show "#page2?id=a", but the <a> tag is clearly has an href of "#page2?id=b" along with the $(e.target).attr("data-url") being "#page2?id=b" when I get to #page2.
有什么想法吗?预先感谢您的帮助.
Any ideas what is going on here? Thanks in advance for any help.
<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上的此处.
Code sample is here on jsfiddle too.
推荐答案
我能够通过使用此有关stackoverflow的问题.这是我使用此插件的代码:
I was able to resolve this issue by using the jqm.page.params plugin with help from this question on stackoverflow. Here is my code for using this plugin:
<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>
这篇关于jQuery Mobile url参数不会在浏览器中更新，而是通过& quot; data-url& quot;来获取正确的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
