jQuery取消特定的click事件

字號:


    本文實(shí)例講述了jQuery取消特定的click事件實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
    眾所周知, jQuery可以多次綁定同一種事件, 而且綁定的每個事件都可以執(zhí)行。 問題來了, 在動態(tài)生成的DOM中, 我們?yōu)槟骋辉亟壎藘煞N不同的click(假設(shè)為A、B), append元素時(shí), 所有元素又綁定一次B, …… 這樣會導(dǎo)致最后點(diǎn)擊時(shí)B事件會成倍往上翻。
    幸運(yùn)的是,jQuery 為我們提供了很優(yōu)雅的方式, 來取消特定命名空間下的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>無標(biāo)題頁</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">
        點(diǎn)我進(jìn)行測試
      </div>
      <input id="Button2" type="button" value="為上面的DIV綁定3次測試事件" onclick="bindEvent()" />
      <input id="Button1" type="button" value="保留正式事件, 取消已綁定的多次測試事件,再綁定一次測試事件 " onclick="ignoreMultiEvent()" />
    </body>
    </html>
    希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。