这是第一页：index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../test/style.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#chercher').focus(function(){
if ($('#chercher').val()=='(Code postale, Ville, Département ...)')
$('#chercher').val("");
});
$('#chercher').blur(function(){
if ($('#chercher').val()=='')
$('#chercher').val("(Code postale, Ville, Département ...)");
});
});
$('#page').live('pagecreate',function(event){
$("#login").bind("click", function(event) {
$.mobile.changePage( "conexion.html", { transition: "flip"} );
});
});`
</script>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="a"><h1>Welcome</h1>
<div data-role="navbar">
<ul>
<li><a href="#">Coupons</a></li>
<li><a href="#">Bon plan</a></li>
<li><input type="button" value="connect" id="login" data-theme="a"/></li>
</ul>
</div><!-- /navbar -->
</div>
<div data-role="content" data-theme="c">
<div>
<input type="text" id="chercher" value="(Code postale, Ville, Département ...)">
</div>
<ul data-role="listview" data-inset="true" data-dividertheme="b" data-count-theme="b">
<li data-role="list-divider" >Choisissez une des catégories</li>
<li><a href="index.php"><img src="images/tout.png" class="ui-li-icon" alt="tout" width="30" height="25"> Tout <span class="ui-li-count">24</span></a></li>
<li><a href="index.php"><img src="images/restauration.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Restauration</a><span class="ui-li-count">2</span></li>
<li><a href="index.php"><img src="images/loisir.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Loisirs</a><span class="ui-li-count">156</span></li>
<li><a href="index.php"><img src="images/beaute.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Beauté,santé <span class="ui-li-count">24</span></a></li>
<li><a href="index.php"><img src="images/mode.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Mode</a><span class="ui-li-count">13</span></li>
<li><a href="index.php"><img src="images/maison.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Maison, Jardin</a><span class="ui-li-count">16</span></li>
<li><a href="index.php"><img src="images/service.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Services</a><span class="ui-li-count">2</span></li>
<li><a href="index.php"><img src="images/nationnal.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Nationnal</a><span class="ui-li-count">0</span></li>
</ul>
</div>
<div data-role="footer" data-theme="a" class="ui-footer"><h1>Pied de page</h1></div>
</div>
<div id="page2" data-role="page">
</div>
</body>
</html>
我的第二页名为：conexion.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<body>
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
$("#notification").text(data);
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "conexion.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
<!-- call ajax page -->
<div data-role="page" id="callAjaxPage">
<div data-role="header">
<h1>Connexion</h1>
<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-url="/">Home</a>
</div>
<div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h3>Sign in</h3>
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<h3 id="notification"></h3>
<button data-theme="b" id="submit" type="submit">Go</button>
</div>
</form>
<div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'214039341980486', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Identifiez vous</fb:login-button>
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Create an account </h3>
</div>
</div>
<div data-role="footer">
<h1>Pied de page</h1>
</div>
</div>
答案 0 :(得分：2)
使用jQuery Mobile绑定链接的推荐解决方案是：
$('#pageId').live('pagecreate',function(event){
$("#login").bind("click", function(event) {
$.mobile.changePage( "connexion.html", { transition: "flip"} );
});
});
您必须在页面div上添加id =“pageId”。
您必须使用pagecreate活动（代替非移动网页上的document.ready）
并检查changePage方法的api（对于jqm beta 2）。
（并更正您的H1标签：<h1header</h1>）
答案 1 :(得分：0)
这是一个大问题......
在 index.html 中，您的<script>...</script>介于</head>和<body>之间。
将您的脚本放在 <head>或<body>部分内，最好放在<body>标记上方的</body>内。
你的最后一个分号后面还有一个急性符号（`）。
});`
在 conexion.html 中，您缺少结束标头：
</head>
然后，您似乎还缺少文档末尾的结束正文和html标记：
</body>
</html>
然后通过W3C Validator运行您的网页并修复任何其他错误。