jQuery取消特定的click事件
2016-08-04来源:易贤网

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

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息