I created the following example to show what I am experiencing.
If I navigate from page1 to page 2 with the button Page 2a, the URL will be ...#page2?id=a as expected.
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>
Code sample is here on jsfiddle too.
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>
The problem is with appended url variables with ajax navigation. JQM uses the appended variables with its own navigation. According to the docs, either lose the ajax navigation, or lose the variables. Breaking it up into several pages with rel="external" would also fix the problem if a web site (not app).
来源：https://stackoverflow.com/questions/10354455/jquery-mobile-url-parameter-not-updating-in-browser-but-getting-correct-one-wit