今天写移动端的页面，碰到一个怪事：
页面上有一个Button，但这个Button绑定的的onclick事件总不会执行，发现需要刷新一下页面后点击才能触发。我的页面HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="jq/jquery.mobile-1.3.2.min.css" />
<script src="jq/jquery.min183.js"></script>
<script src="jq/jquery.mobile-1.3.2.min.js"></script>
<link rel="Stylesheet" href="Style.css" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnOrder').click(function (e) {
$.get("DoCart.asp?PID=" + 515, function (data, status) {
if (status == "success") {
alert("Data: " + data)
self.location = "buy.asp";
}
})
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-theme="e">
<a href="product.asp?SID=9" data-role="button" data-icon="arrow-l">返回</a>
<h1>北极绒秋衣秋裤</h1>
<a style="margin-top:2.3px" id="main_exit" data-icon="cart-icon" data-iconpos="left" data-shadow="false" data-iconshadow="false" class="ui-btn-right">购物车<span style="color:Red;">0</span></a>
</div>
<div data-role="content" data-theme="e">
<h3>北极绒秋衣秋裤<span style="color:Red;">￥89</span></h3>
<p>北极绒 秋衣秋裤 男女 莫代尔 男麻灰 L北极绒，品质保证！</p>
<p><input type="button" value="立即订购" id="btnOrder" /></p>
（后面省略了）
刚开始以为是手机浏览器缓存的旧页面，于是反复清空缓存，换不同的浏览器（360浏览器、UC浏览器）测试都有这个问题，后来在PC上用Chrome试也这样。
疑惑之下，使用Chrome的开发者工具：elements查看，文档变成了这样：
<html xmlns="http://www.w3.org/1999/xhtml" class="ui-mobile">
<head><base href="http://shop.zldb.cc/m/Item.asp?PID=515&SID=9">
<title>北极绒秋衣秋裤</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="jq/jquery.mobile-1.3.2.min.css">
<link rel="Stylesheet" href="Style.css">
<script src="jq/jquery.min183.js"></script>
<script src="jq/jquery.mobile-1.3.2.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/m/buy.asp" tabindex="0" class="ui-page ui-body-c ui-page-header-fixed" style="padding-top: 44px; min-height: 588px;">
<div>
<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"><input id="Text1" type="text" class="ui-input-text ui-body-c"></div>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon ui-icon-loading"></span><h1>loading</h1></div><div data-role="page" data-url="/m/Item.asp?PID=515&SID=9" data-external-page="true" tabindex="0" class="ui-page ui-body-c ui-page-header-fixed ui-page-active" style="padding-top: 44px; min-height: 288px;">
<div data-role="header" data-position="fixed" data-theme="e" class="ui-header ui-bar-e ui-header-fixed slidedown" role="banner">
<a href="product.asp?SID=9" data-role="button" data-icon="arrow-l" class="ui-btn-left ui-btn ui-btn-up-e ui-shadow ui-btn-corner-all ui-btn-icon-left" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="e"><span class="ui-btn-inner"><span class="ui-btn-text">返回</span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"> </span></span></a>
<h1 class="ui-title" role="heading" aria-level="1">北极绒秋衣秋裤</h1>
<a style="margin-top:2.3px" id="main_exit" data-icon="cart-icon" data-iconpos="left" data-shadow="false" data-iconshadow="false" class="ui-btn-right ui-btn ui-btn-up-e ui-btn-corner-all ui-btn-icon-left" data-corners="true" data-wrapperels="span" data-theme="e"><span class="ui-btn-inner"><span class="ui-btn-text">购物车<span style="color:Red;">0</span></span><span class="ui-icon ui-icon-cart-icon"> </span></span></a>
</div>
<div data-role="content" data-theme="e" class="ui-content ui-body-e" role="main">
<h3>北极绒秋衣秋裤<span style="color:Red;">￥89</span></h3>
<p>北极绒 秋衣秋裤 男女 莫代尔 男麻灰 L北极绒，品质保证！</p>
<p><div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="e" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-e" aria-disabled="false"><span class="ui-btn-inner"><span class="ui-btn-text">立即订购</span></span><input type="button" value="立即订购" id="btnOrder" class="ui-btn-hidden" data-disabled="false"></div></p>
看来：
1、JQuery-Mobile 的init初始化网页会对原有结构做了调整
2、从为DIV增加了属性data-url来看，Page DIV中的内容可能是异步加载的
所以猜JS代码放在<head>中时，DIV中的DOM对象还没有生成，所以事件也没有绑定
把JS代码移到<body>中的<div data-role="page">部分：
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title></title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <link rel="stylesheet" href="jq/jquery.mobile-1.3.2.min.css" /> | |
| <script src="jq/jquery.min183.js"></script> | |
| <script src="jq/jquery.mobile-1.3.2.min.js"></script> | |
| <link rel="Stylesheet" href="Style.css" /> | |
| </head> | |
| <body> | |
| <div data-role="page"> | |
| <script type="text/javascript"> | |
| $(document).ready(function () { | |
| $('#btnOrder').click(function (e) { | |
| $.get("DoCart.asp?PID=" + 515, function (data, status) { | |
| if (status == "success") { | |
| alert("Data: " + data) | |
| self.location = "buy.asp"; | |
| } | |
| }) | |
| }); | |
| }); | |
| </script> | |
| <div data-role="header" data-position="fixed" data-theme="e"> | |
| <a href="product.asp?SID=9" data-role="button" data-icon="arrow-l">返回</a> | |
| <h1>北极绒秋衣秋裤</h1> | |
| <a style="margin-top:2.3px" id="main_exit" data-icon="cart-icon" data-iconpos="left" data-shadow="false" data-iconshadow="false" class="ui-btn-right">购物车<span style="color:Red;">0</span></a> | |
| </div> | |
| <div data-role="content" data-theme="e"> | |
| <h3>北极绒秋衣秋裤<span style="color:Red;">￥89</span></h3> | |
| <p>北极绒 秋衣秋裤 男女 莫代尔 男麻灰 L北极绒，品质保证！</p> | |
| <p><input type="button" value="立即订购" id="btnOrder" /></p>
|
终于解决了！