【发布时间】：2012-05-15 20:36:59
【问题描述】：
这是我的 HTML 代码。我正在尝试的事情听起来很简单，但我做不到。我正在尝试使用 jquery mobile 建议的多页模板。第一页我有一个文本框和按钮。用户在文本框中输入一个值，然后单击应该将用户带到“page2”并显示搜索详细信息的按钮。
下面的代码将我带到“page2”，但我看不到任何搜索结果。我在两者之间插入了一个警报，并弹出了数据。 page2 上的后退按钮也不会将我带到 page1？
非常感谢任何指针。
<!DOCTYPE HTML>
<html>
<head>
<title>Employee Finder</title>
<script src="jquery-mobile/jquery-1.7.2.min.js"/>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js"/>
<script src="phonegap-1.3.0.js"/>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"/>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script>
$(document).ready(function() {
$('#findemplyoee').click(function() {
$.mobile.changePage('#page2', { transition: "slide", changeHash: true, reverse: true });
var employeeNumber = $("#employeeNumber").val();
var employeedetail = JSON.parse(... call a function here);
if(employeedetail.found)
{
$('#employeefirstName').text(employeedetail.firstName);
$('#employeelastName').text(employeedetail.lastName);
}
else
{
$('#employeeDetails').html("<p>Sorry the employee Number you entered was not found!</p>");
}
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Find Employee Data</h1>
</div>
<div data-role="content" id="searchDetails">
<input name="employeeNumber" type="text" id="employeeNumber"/>
<input type="button" id="findemplyoee" data-theme="b" value="Find Employee"/>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="page2">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div id="employeeDetails">
<p id="employeefirstName"></p>
<p id="employeelastName"></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： html jquery-mobile