我有两个html页面，每个页面都包含JQM页面。如果我从Page1移到Page2（通过单击示例中的按钮使用 $ .mobile.changePage 并使用 reloadPage = true ），然后返回到Page1，然后分配任何值到txt1文本框（在pageshow事件内）不起作用 - 文本框仍然是BLANK。但是，在第二次旅行（即使用按钮点击的Page1-＆gt; Page2-＆gt; Page1）中，它可以正常工作。代码示例如下：
<!DOCTYPE>
<html>
<head>
<title>Page-1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="a" data-url="/JqmSimpleApp/Page1.htm">
<div data-role="header" class="header_bar">
Page-1 Header
</div>
<div data-role="content" class="investor-centre">
Page-1 CONTENT
<br/>
<a id="btnMoveToPage2" href="#" data-role="button" data-inline="true" data-theme="b">Move to Page-2</a>
<input type="text" id="txt1"/>
</div>
<div data-role="footer" data-theme="c" data-position="fixed">
Page-1 Footer
</div>
<!--################### Page specific Script Section ############################# -->
<!--NOTE: The reason it's been put under the data-role="page" section is that when a page is been loaded using Ajax call JQM only loads the content within data-role="page" section. -->
<script type="text/javascript">
$('body').off('pageinit', "#page_1").on('pageinit', "#page_1", function () {
alert('Page-1 INIT');
$("body").off("click", "#btnMoveToPage2").on("click", "#btnMoveToPage2", function () {
$.mobile.changePage("Page2.htm", { reloadPage: true });
});
$("body").off("click", "#btnShow").on("click", "#btnShow", function () {
var myDate = new Date();
$("#txt1").val(myDate);
alert('Clicked');
});
});
$('body').off('pageshow', "#page_1").on('pageshow', "#page_1", function () {
alert('Page-1 SHOW');
var myDate = new Date();
$("#txt1").val(myDate); //*** PROBLEM HERE - Doesn't show any value in the 1st round trip.****\\\
alert('txt1 value: ' + $("#txt1").val());// STRANGE!! When I read from txt1 text box it ALWAYS shows value
});
</script>
</div>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<title>Page-2</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_2" data-theme="c" data-url="/JqmSimpleApp/Page2.htm">
<div data-role="header" class="header_bar">
Page-2 Header
</div>
<div data-role="content" class="investor-centre">
Page-2 CONTENT
<br/>
<a id="btnMoveToPage1" href="#" data-role="button" data-inline="true" data-theme="b">Move to Page-1</a>
<input type="text" id="txt2"/>
</div>
<div data-role="footer" data-theme="c" data-position="fixed">
Page-2 Footer
</div>
<!--################### Page specific Script Section ############################# -->
<!--NOTE: The reason it's been put under the data-role="page" section is that when a page is been loaded using Ajax call JQM only loads the content within data-role="page" section. -->
<script type="text/javascript">
$('body').off('pageinit', "#page_2").on('pageinit', "#page_2", function () {
alert('Page-2 INIT');
$("body").off("click", "#btnMoveToPage1").on("click", "#btnMoveToPage1", function () {
$.mobile.changePage("Page1.htm", { reloadPage: true });
});
});
$('body').off('pageshow', "#page_2").on('pageshow', "#page_2", function () {
alert('Page-2 SHOW');
var myDate = new Date();
$("#txt2").val(myDate);
});
</script>
</div>
</body>
</html>
请注意，我正在尝试使用Page1中的pageshow事件内的$（“＃txt1”）。val（myDate）为输入元素txt1赋值。文本框保持空白，但是，如果我从该文本框中读取值并显示在警报中，我可以在警告框中看到该值。我是否必须以某种方式刷新UI或者我是否使用错误的事件来访问该元素？
进一步调查：
后来我尝试了一个附加页面（index.htm），从那里我移动到Page1然后转到Page2然后往返。所以index.htm-＆gt; Page1.htm-＆gt; Page2.htm-＆gt; Page1.htm，这次没有问题。所以它意味着通过HTTP加载的第一页的问题。随后使用AJAX（$ .mobile.changePage，reloadPage = true）加载后续页面，它们工作正常。我不得不说这是JQM中的一个错误。这有什么工作要做吗？
这是我的索引页面：
<!DOCTYPE>
<html>
<head>
<title>Page-1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="a" data-url="/JqmSimpleApp/Page1.htm">
<div data-role="header" class="header_bar">
Page-1 Header
</div>
<div data-role="content" class="investor-centre">
Page-1 CONTENT
<br/>
<a id="btnMoveToPage2" href="#" data-role="button" data-inline="true" data-theme="b">Move to Page-2</a>
<input type="text" id="txt1"/>
<a id="btnShow" href="#" data-role="button" data-inline="true" data-theme="b">Show</a>
</div>
<div data-role="footer" data-theme="c" data-position="fixed">
Page-1 Footer
</div>
<!--################### Page specific Script Section ############################# -->
<!--NOTE: The reason it's been put under the data-role="page" section is that when a page is been loaded using Ajax call JQM only loads the content within data-role="page" section. -->
<script type="text/javascript">
$('body').off('pageinit', "#page_1").on('pageinit', "#page_1", function () {
//alert('Page-1 INIT');
$("body").off("click", "#btnMoveToPage2").on("click", "#btnMoveToPage2", function () {
$.mobile.changePage("Page2.htm", { reloadPage: true });
});
$("body").off("click", "#btnShow").on("click", "#btnShow", function () {
var myDate = new Date();
$("#txt1").val(myDate);
alert('Clicked');
});
});
$(document).off('pageshow', '#page_1').on('pageshow', "#page_1", function (event) {
//alert('Page-1 SHOW - ' + $("#txt1").length);
$("#txt1").val('');
var myDate = new Date();
$("#txt1").val(myDate); //*** PROBLEM HERE - Doesn't show any value in the 1st round trip.****\\\
alert('txt1 value: ' + $("#txt1").val()); // STRANGE!! When I read from txt1 text box it ALWAYS shows value
});
</script>
</div>
</body>
</html>
答案 0 :(得分：1)
将 $ .mobile.activePage 添加为jquery选择器上下文（第二个参数）可以解决问题。
$("#txt1", $.mobile.activePage).val(myDate);