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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
ES6 Generator基本使用方法示例
Jun 06 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一些有意思的小区别
2006/12/06 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
20个PHP常用类库小结
2011/09/11 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
工作会议欢迎词
2014/01/16 职场文书
2014年施工员工作总结
2014/11/18 职场文书
毕业生学校组织意见
2015/06/04 职场文书
亲情作文之母爱
2019/09/25 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技