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

最新推荐文章于 2022-06-13 15:58:22 发布

原创最新推荐文章于 2022-06-13 15:58:22 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种解决JQuery Mobile中Button点击事件不触发的问题。通过调整JS代码的位置，确保DOM元素加载完成后再绑定事件，从而解决了事件无法响应的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

页面上有一个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>

终于解决了！