在綁定事件的過程中，不僅可以為同一個元素綁定多個事件，也可以為多個元素綁定同一個事件。假設網頁上有一個<button>元素，使用以下代碼為該元素綁定多個相同的事件。
<script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的綁定函數1</p>"); }).bind("click", function(){ $('#test').append("<p>我的綁定函數2</p>"); }).bind("click", function(){ $('#test').append("<p>我的綁定函數3</p>"); }); }) </script> <body> <button id="btn">點擊我</button> <div id="test"></div> </body>
當單擊按鈕后，會出現如上圖所示的效果。
1. 移除按鈕元素上所有注冊的事件
添加一個移除事件的按鈕。然后為按鈕綁定一個事件，代碼如下：
<script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的綁定函數1</p>"); }).bind("click", function(){ $('#test').append("<p>我的綁定函數2</p>"); }).bind("click", function(){ $('#test').append("<p>我的綁定函數3</p>"); }); $('#delAll').click(function(){ $('#btn').unbind("click"); }); }) </script> <body> <button id="btn">點擊我</button> <div id="test"></div> <button id="delAll">刪除所有事件</button> </body>
因為元素綁定的都是 click 事件，所以不寫參數也可以達到同樣的目的。
$('#delAll').click(function(){
$('#btn').unbind();
});
下面來看看 unbind() 方法的語法結構：unbind([type] , [data]);
第1個參數是事件類型，第2個參數是將要移除的函數，具體說明如下。
(1) 如果沒有參數，則刪除所有綁定的事件。
(2) 如果提供了事件類型作為參數，則只刪除該類型的綁定事件。
(3) 如果把在綁定時傳遞的處理函數作為第2個參數，則只有這個特定的事件處理函數會被刪除。
2. 移除<button>元素的其中一個事件
首先需要為這些匿名處理函數指定一個變量。然后就可以單獨刪除某一個事件了， jQuery 代碼如下：
<script type="text/javascript"> $(function(){ $('#btn').bind("click", myFun1 = function(){ $('#test').append("<p>我的綁定函數1</p>"); }).bind("click", myFun2 = function(){ $('#test').append("<p>我的綁定函數2</p>"); }).bind("click", myFun3 = function(){ $('#test').append("<p>我的綁定函數3</p>"); }); $('#delTwo').click(function(){ $('#btn').unbind("click",myFun2); }); }) </script> <body> <button id="btn">點擊我</button> <div id="test"></div> <button id="delTwo">刪除第二個事件</button> </body>
當單擊“刪除第二個事件”按鈕后，再次單擊“點擊我”按鈕，顯示下圖所示的效果。
另外，對於只需要觸發一次，隨后就要立即解除綁定的情況，jQuery 提供了一種簡寫方法——one() 方法。 one() 方法可以為元素綁定處理函數。當處理函數觸發一次后，立即被刪除。即在每個對象上，事件處理函數只會被執行一次。
one() 方法的結構與 bind() 方法類似，使用方法也與 bind() 方法相同，其語法結構如下：one( type, [data], fn )；
示例代碼如下：
<script type="text/javascript"> $(function(){ $('#btn').one("click", function(){ $('#test').append("<p>我的綁定函數1</p>"); }).one("click", function(){ $('#test').append("<p>我的綁定函數2</p>"); }).one("click", function(){ $('#test').append("<p>我的綁定函數3</p>"); }); }) </script> <body> <button id="btn">點擊我</button> <div id="test"></div> </body>
使用one() 方法為<button>元素綁定單擊事件后，只在用戶第1次單擊按鈕時，處理函數才執行，之后的單擊毫無作用。