jQuery取消特定的click事件

 更新时间:2016年02月29日 11:15:34   作者:yenange  
这篇文章主要介绍了jQuery取消特定的click事件实现方法,结合实例形式分析了jQuery简单实现事件绑定及取消事件绑定的相关技巧,需要的朋友可以参考下

本文实例讲述了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拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    这篇文章主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
    2016-02-02
  • jQuery实现的分子运动小球碰撞效果

    jQuery实现的分子运动小球碰撞效果

    这篇文章主要介绍了jQuery实现的分子运动小球碰撞效果,涉及jQuery基于定时函数操作页面元素动态变换的技巧,需要的朋友可以参考下
    2016-01-01
  • jquery显示隐藏元素的实现代码

    jquery显示隐藏元素的实现代码

    下面小编就为大家带来一篇jquery显示隐藏元素的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery中table数据的值拷贝和拆分

    jQuery中table数据的值拷贝和拆分

    在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决。下面小编给大家介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值,需要的朋友参考下
    2017-03-03
  • jQuery之字体大小的设置方法

    jQuery之字体大小的设置方法

    本篇文章主要是对jQuery 字体大小的设置方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 如何使用HTML5地理位置定位功能

    如何使用HTML5地理位置定位功能

    用相对简单的JavaScript代码,可以创建出能确定用户地理位置详细信息的Web应用,包括经纬度以及海拔等。一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能,其中还综合了GoogleMaps API这样的地图系统。
    2015-04-04
  • jQuery固定浮动侧边栏实现思路及代码

    jQuery固定浮动侧边栏实现思路及代码

    如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,下面将思路及具体实现与大家分享下
    2014-09-09
  • jQuery读取和设定KindEditor值的方法

    jQuery读取和设定KindEditor值的方法

    这篇文章主要介绍了jQuery读取和设定KindEditor值的方法,大家参考使用吧
    2013-11-11
  • jQuery on()方法绑定动态元素的点击事件实例代码浅析

    jQuery on()方法绑定动态元素的点击事件实例代码浅析

    这篇文章主要介绍了jQuery on()方法绑定动态元素的点击事件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 浅谈jQuery效果函数

    浅谈jQuery效果函数

    下面小编就为大家带来一篇jQuery效果函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-09-09

最新评论