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 相关文章推荐
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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/01/28 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
PHP数组实例详解
2016/06/26 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
JS查看对象功能代码
2008/04/25 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python3生成手写体数字方法
2018/01/30 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python可视化实现代码
2019/01/15 Python
Django缓存系统实现过程解析
2019/08/02 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
上课迟到检讨书
2014/02/19 职场文书
运动会口号8字
2014/06/07 职场文书
股份转让协议书范本
2015/01/27 职场文书
公司联欢会主持词
2015/07/04 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
我的生日感言
2015/08/03 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
nginx.conf配置文件结构小结
2022/04/08 Servers
python解析json数据
2022/04/29 Python