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 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
简单实现node.js图片上传
Dec 18 Javascript
js自定义瀑布流布局插件
May 16 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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列出mysql表所有行和列的方法
2015/03/13 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
原生js开发的日历插件
2017/02/04 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python类和继承用法实例
2015/07/07 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python安装本地whl的实例步骤
2019/10/12 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
详解pandas赋值失败问题解决
2020/11/29 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
学生会部长竞选稿
2015/11/19 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
Python中的pprint模块
2021/11/27 Python
PHP 时间处理类Carbon
2022/05/20 PHP