编程 Javascript

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程序设计有所帮助。

jQuery取消特定的click事件

- Author -

yenange

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery 将disabled的元素置为enabled的三种方法

Jul 25 Javascript

Ajax 数据请求的简单分析

Apr 05 Javascript

javascript 手动给表增加数据的小例子

Jul 10 Javascript

jquery删除数据记录时的弹出提示效果

May 06 Javascript

jQuery 写的简单打字游戏可以提示正确和错误的次数

Jul 01 Javascript

js删除局部变量的实现方法

Jun 25 Javascript

关于动态生成dom绑定事件失效的原因及解决方法

Aug 06 Javascript

jquery 抽奖小程序实现代码

Oct 12 Javascript

JS实现微信弹出搜索框多条件查询功能

Dec 13 Javascript

turn.js异步加载实现翻书效果

Jul 25 Javascript

Element Badge标记的使用方法

Jul 27 Javascript

JavaScript使用canvas绘制坐标和线

Apr 28 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