jQuery取消特定的click事件


Posted in Javascript onFebruary 29, 2016

本文实例讲述了jQuery取消特定的click事件实现方法。分享给大家供大家参考,具体如下:

众所周知, jQuery可以多次绑定同一种事件, 而且绑定的每个事件都可以执行。 问题来了, 在动态生成的DOM中, 我们为某一元素绑定了两种不同的click(假设为A、B), append元素时, 所有元素又绑定一次B, …… 这样会导致最后点击时B事件会成倍往上翻。

幸运的是,jQuery 为我们提供了很优雅的方式, 来取消特定命名空间下的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>
  <title>无标题页</title>
  <script src="jquery/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      $("#divTest").click(function(){
        alert("正式事件。");
      });
    });
    function bindEvent(){
      for(var i=0;i<3;i++){
        $("#divTest").bind("click.test",function(){
          testEvent();
        });
      }
    }
    function testEvent(){
      alert("测试事件");
    }
    function ignoreMultiEvent(){
      $("#divTest").unbind("click.test").bind("click.test",function(){
        testEvent();
      });
    }
  </script>
</head>
<body>
  <div id="divTest" style="height: 163px;text-align:center;line-height:163px;width: 500px; background-color: #0000FF;">
    点我进行测试
  </div>
  <input id="Button2" type="button" value="为上面的DIV绑定3次测试事件" onclick="bindEvent()" />
  <input id="Button1" type="button" value="保留正式事件, 取消已绑定的多次测试事件,再绑定一次测试事件 " onclick="ignoreMultiEvent()" />
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
js正确获取元素样式详解
Aug 07 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jquery仿微信聊天界面
May 06 jQuery
vue页面离开后执行函数的实例
Mar 13 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
js实现简单的随机点名器
Sep 17 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 #Javascript
JS三级可折叠菜单实现方法
Feb 29 #Javascript
精通JavaScript的this关键字
May 28 #Javascript
javascript正则表达式总结
Feb 29 #Javascript
javascript计时器编写过程与实现方法
Feb 29 #Javascript
javascript插件开发的一些感想和心得
Feb 28 #Javascript
详解Javascript中的Object对象
Feb 28 #Javascript
You might like
解析php中获取系统信息的方法
2013/06/25 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JS实现self的resend
2010/07/22 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
js常用排序实现代码
2010/12/28 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
详解Python中DOM方法的动态性
2015/04/11 Python
python 接收处理外带的参数方法
2018/12/03 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
法学个人求职信范文
2014/01/27 职场文书
团代会主持词
2014/04/02 职场文书
军训个人总结
2015/03/03 职场文书
小学生节水倡议书
2015/04/29 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
docker 制作mysql镜像并自动安装
2022/05/20 Servers