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代码加载优化方法
Jan 30 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
TS 类型收窄教程示例详解
Sep 23 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游戏编程25个脚本代码
2011/02/08 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue v-model动态生成详解
2018/06/30 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
原生js实现碰撞检测
2020/03/12 Javascript
python文件写入实例分析
2015/04/08 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
Python用户自定义异常的实现
2020/12/25 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
建筑公司文秘岗位职责
2013/11/29 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
检讨书模板
2015/01/29 职场文书
小学记事作文之200字
2019/08/06 职场文书