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

来源：互联网发布：字体秀下载软件编辑：程序博客网时间：2024/06/05 02:07

先看一段简单的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>

0 0