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 相关文章推荐
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
json数据处理及数据绑定
Jan 25 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php include类文件超时问题处理
2015/02/06 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
javascript new一个对象的实质
2010/01/07 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
JavaScript数值类型知识汇总
2019/11/17 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
python del()函数用法
2013/03/24 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
自己使用总结Python程序代码片段
2015/06/02 Python
python正则表达式之对号入座篇
2018/07/24 Python
pytorch构建多模型实例
2020/01/15 Python
python与idea的集成的实现
2020/11/20 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
美国旅游网站:Tours4Fun
2017/02/17 全球购物
迟到检讨书900字
2014/01/14 职场文书
《长城》教学反思
2014/02/14 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
个人借条范本
2015/05/25 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
关于Python中进度条的六个实用技巧分享
2022/04/05 Python