关于事件触发多次产生的BUG问题

最新推荐文章于 2023-05-22 10:23:37 发布

小勇Oo

最新推荐文章于 2023-05-22 10:23:37 发布

阅读量1k

点赞数

分类专栏： js篇

本文链接：https://blog.csdn.net/qq383264679/article/details/42913849

版权

js篇专栏收录该内容

29 篇文章 0 订阅

订阅专栏

先看一段简单的html+js脚本

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
	
	
<script type="text/javascript">
		$(function() {
			 $("input[name=bind]").click(function() {
			 		$("#one").click(function() {
						alert("aaa");
					
					});
				 	   
			 });

		});
</script>

<style>
	div {
		border:1px solid red;
		width:100px;
		height:100px;
	}

</style>	
</head>

<body>
	<div id="test">
		<div id="one">111111111111</div>  <br />

		
		<input type="button" value="给DIV one注册点击事件"  name="bind" />
	</div>
</body>
</html>

当点击一次"给DIV one注册点击事件"时候，在点击div one点击会被触发一次，当多次给div one注册点击事件的时候，点击事件会注册多次。

这也就是事件会触发多次的原因，应该是注册多次。消除注册多次的实现用jquery很简单，只需要：

$("#one").unbind("click"); 即可！

测试页面如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
	
	
<script type="text/javascript">
		$(function() {
			 $("input[name=bind]").click(function() {
			 		$("#one").click(function() {
						alert("aaa");
					
					});
				 	   
			 });
			 
			 $("input[name=remove]").click(function() {
			 		
					$("#one").unbind("click");
				
					
				 	   
			 });
		});
</script>

<style>
	div {
		border:1px solid red;
		width:100px;
		height:100px;
	}

</style>	
</head>

<body>
	<div id="test">
		<div id="one">111111111111</div>  <br />

		
		<input type="button" value="给DIV one注册点击事件"  name="bind" />
		<input type="button" value="给DIV one解除点击事件" name="remove" />
	</div>
</body>
</html>

小勇Oo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于事件触发多次产生的BUG问题

先看一段简单的html+js脚本无标题文档 $(function() { $("input[name=bind]").click(function() { $("#one").click(function() { alert("aaa"); }); }); });
复制链接

扫一扫

专栏目录