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中日期转换成时间戳的小例子
Mar 21 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
前端MVVM框架解析之双向绑定
Jan 24 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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
玩转虚拟域名◎+ .
2006/10/09 PHP
FCKeditor的安装(PHP)
2007/01/13 PHP
浅析is_writable的php实现
2013/06/18 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
php递归函数怎么用才有效
2018/02/24 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
python修改FTP服务器上的文件名
2019/09/11 Python
学python安装的软件总结
2019/10/12 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
SQL数据库笔试题
2016/03/08 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
商务英语广告词大全
2014/03/18 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书