JQuery-Mobile, 写在<head>中的代码刷新后才能执行？

ynduanlian

浏览: 37997 次
性别:
来自: 北京

最近访客更多访客>>

fhtwins

jasonrush2012

Tyrion

HellSing00

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

今天写移动端的页面，碰到一个怪事：

页面上有一个Button，但这个Button绑定的的onclick事件总不会执行，发现需要刷新一下页面后点击才能触发。我的页面HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(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>

<h1>北极绒秋衣秋裤</h1>

</div>

<h3>北极绒秋衣秋裤<span style="color:Red;">￥89</span></h3>

（后面省略了）

刚开始以为是手机浏览器缓存的旧页面，于是反复清空缓存，换不同的浏览器（360浏览器、UC浏览器）测试都有这个问题，后来在PC上用Chrome试也这样。

疑惑之下，使用Chrome的开发者工具：elements查看，文档变成了这样：

<title>北极绒秋衣秋裤</title>

</head>

<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;">

<h1 class="ui-title" role="heading" aria-level="1">北极绒秋衣秋裤</h1>

</div>

<h3>北极绒秋衣秋裤<span style="color:Red;">￥89</span></h3>

看来：

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>

终于解决了！

分享到：

大数据基本知识 | JQuery-Mobile学习笔记：内联按钮 data-in ...

2014-11-18 12:35
浏览 895
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论