信鸽网

jQuery取消特定的click事件

  作者：bea

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

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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: