jQuery取消特定的click事件

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • Jquery为DIV添加click事件的简单实例

    今天在做一个抽奖活动时小编要做一个抽奖没有中奖之后直接弹出一个提示,然后再给div添加一个事件了,下面我们来看这个例子的做法. html <a href="javascript:void(0);" id="click_ms" > <img src="img/bbg_08.jpg" border="0" > </a> jquery事件 $('#click_ms').click(function

  • JQuery调用绑定click事件的3种写法

    第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式: $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon').on('click

  • jQuery中click事件用法实例

    本文实例讲述了jQuery中click事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过click()方法为click事件绑定事件处理程序.例如: 复制代码 代码如下: $("button").click(function(){$("div").css("color",

  • Jquery对新插入的节点 绑定Click事件失效的解决方法

    1.有人说用 Live, 事实上现在最新的Jquery已经不支持 Live 了.live的解决方法如下: 你可以看这个 也可以不看 ,只是做到心中有数就可以了.下面介绍ON的方法. live:Live的使用介绍 2.有人用了ON 来解决, 这个解决方法基本在理. On :On的介绍,能解决问题 On的方法,基本能解决问题,但是你也要根据你的具体情况做选择.并不是每个人的代码都像上面这个案例描述的那么简单.但是万变不离其宗. 我是这样来做的,最终把问题解决了. 我有一个UL 标签是静态的,就是说不

  • jQuery中click事件的定义和用法

    本文实例讲述了jQuery中click事件的定义和用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. click()方法也可以绑定事件处理方法. 语法结构一: 触发click事件. 复制代码 代码如下: $(selector).click() 语法结构二: 为click事件绑定事件处理方法. 复制代码 代码如下: $(selector).click(data,function) 参数列表: 参数 描述 d

  • jQuery取消特定的click事件

    本文实例讲述了jQuery取消特定的click事件实现方法.分享给大家供大家参考,具体如下: 众所周知, jQuery可以多次绑定同一种事件, 而且绑定的每个事件都可以执行. 问题来了, 在动态生成的DOM中, 我们为某一元素绑定了两种不同的click(假设为A.B), append元素时, 所有元素又绑定一次B, -- 这样会导致最后点击时B事件会成倍往上翻. 幸运的是,jQuery 为我们提供了很优雅的方式, 来取消特定命名空间下的click. <!DOCTYPE html PUBLIC &qu

  • JQuery样式操作、click事件以及索引值-选项卡应用示例

    本文实例讲述了JQuery样式操作.click事件以及索引值-选项卡应用.分享给大家供大家参考,具体如下: JQuery的css函数既能读属性值,也能写属性值: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式操作</title> <script src="http://libs.ba

  • 轻松实现jQuery添加删除按钮Click事件

    轻松实现jQuery添加删除按钮Click事件

    大家登陆一些网站或论坛时,经常会被要求先浏览和确认"用户协议"."用户协议"底部通常会设置一个"我已阅读并同意"复选框,勾选了该复选框,"登陆"按钮才可用. 如下图所示,勾选"I have read and accept."复选框,Login按钮才会相应click事件,登陆成功后切换到欢迎画面. 通常情况我们是怎么实现的呢,很多同学会想到用javascript设置按钮的disabled属性.这当然是一种不错

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jquery中取消和绑定hover事件的实现代码

    在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑定的事件呢? 一.如何绑定hover事件 先看以下代码,假设我们给a标签绑定一个click和hover事件: $(document).ready(function(){ $('a').bind({ hover: function(e) { // Hover event handler alert("

  • jquery取消事件冒泡的三种方法(推荐)

    1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: $("form").bind( "submit", function() { return false; } ); 2.通过使用 preventDefault() 方法只取消默认的行为. jQuery 代码: $("form").bind( "submit", function(event){ event.preventDefault(); } );

  • jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <title>单选框radio绑定click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="

随机推荐