如何用jQuery替換事件處理程序？

我有一個使用AJAX導航的網站。我有兩個頁面，我使用點擊和拖動功能使用如何用jQuery替換事件處理程序？

$(".myDragArea").mousedown(function(){ 
    do stuff... 
    mouseDrag = true; // mouseDrag is global. 
}); 

$("body").mousemove(function(){ 
    if (mouseDrag) { 
    do stuff... 
    } 
}); 

$("body").mouseup(function(){ 
    if (mouseDrag) { 
    do stuff... 
    mouseDrag = false; 
    } 
});

我只是輸入，所以請原諒任何偶然的語法錯誤。該網站的兩個部分使用幾乎相同的代碼，唯一的區別是$("body").mouseup()函數中的內容。但是，如果我訪問第一部分，然後導航到第二部分，則在mouseup上運行的代碼不會更改。我已經用螢火蟲遍歷代碼，並且在第二部分加載時運行$("body").mouseup()時沒有錯誤或拋出。

那麼，爲什麼第二次運行$("body").mouseup()時事件處理程序不會更改？

來源

2010-08-30 smfoote

調用$("body").mouseup(function)將添加事件處理程序。
您需要通過編寫$("body").unbind('mouseup');刪除現有的處理程序。

來源

2010-08-30 22:17:34 SLaks

這正是我所需要的。令人驚訝的是，我還沒有遇到這個問題 - 或者我可能並沒有真正意識到這一點。無論哪種方式，謝謝。 – smfoote 2010-08-30 22:33:33

jQUery在連線處理程序時不會「替換」事件處理程序。

如果您使用Ajax來導航，而不是刷新整個DOM（即不產生對每個請求一個全新的體元素），然後執行像一個新行：

$("body").mouseup(function(){

只是要添加附加的處理程序。你的第一個處理程序仍然存在。

你需要通過調用

$("body").unbind("mouseUp");

來源

2010-08-30 22:18:25 womp

我使用AJAX進行導航，所以DOM不會重新加載，所以就是這樣。謝謝。 – smfoote 2010-08-30 22:34:08

使用$("body").mouseup(...)將增加一個事件處理程序是在鼠標鬆開觸發人體特別是去除任何處理程序。

如果您想添加另一個與當前事件處理程序衝突的事件處理程序，那麼您必須先刪除當前衝突的事件處理程序。

你有4個選項可以用.unbind()做到這一點。我會從最精確列出他們最精確的選項：

Nuclear option - 從body
```
$("body").unbind(); 
```
這是相當粗糙刪除所有事件處理程序。我們試着改進。
The elephant gun - 從body
```
$("body").unbind('mouseup'); 
```
這是一個好一點的刪除所有mouseup事件處理程序，但我們仍然可以更精確。

The surgeon's scalpel - 從body

當然這個版本中，你必須設置你的事件處理程序變量中刪除一個特定的事件處理程序。在你的情況，這將是這個樣子：

myMouseUpV1 = function(){ 
    if (mouseDrag) { 
    do stuff... 
    mouseDrag = false; 
    } 
} 

$("body").mouseup(myMouseUpV1); 

$("body").unbind('mouseup', myMouseUpV1); 
$("body").mouseup(myMouseUpV2); // where you've defined V2 somewhere

Scalpel with anesthesia（好吧，這個比喻的穿着單薄） - 對事件處理程序可以創建命名空間綁定和取消綁定。您可以使用此技術來綁定和解除綁定匿名函數或對函數的引用。對於名稱空間，您必須直接使用.bind()方法，而不是其中一個快捷方式（如.mouseover()）。
要創建一個命名空間：
```
$("body").bind('mouseup.mySpace', function() { ... }); 
```
或
```
$("body").bind('mouseup.mySpace', myHandler); 
```
然後解除綁定任何的前面的例子中，你可以使用：
```
$("body").unbind('mouseup.mySpace'); 
```
您可以一次解除綁定多個命名空間處理程序通過鏈接他們：
```
$("body").unbind('mouseup.mySpace1.mySpace2.yourSpace'); 
```
最後，無論事件類型如何，您都可以解除綁定命名空間中的所有事件處理程序！
```
$("body").unbind('.mySpace') 
```
你不能用一個簡單的參照處理程序做到這一點。 $("body").unbind(myHandler)將不是工作，因爲只需簡單引用處理程序，您必須指定事件類型（$("body").unbind('mouseup', myHandler)）！

PS：您也可以從自身內部使用.unbind(event)解除綁定的事件。如果您想要trigger an event handler only a limited number of times，這可能很有用。

var timesClicked = 0; 
$('input').bind('click', function(event) { 
    alert('Moar Cheezburgerz!'); 
    timesClicked++; 
    if (timesClicked >= 2) { 
    $('input').unbind(event); 
    $('input').val("NO MOAR!"); 
    } 
});

來源

2010-08-30 22:32:32

你錯過了命名空間。 – SLaks 2010-08-30 22:35:02

@SLaks - 謝謝。之前沒有使用過這種技術。我會嘗試添加它。 – 2010-08-30 22:38:48

如何用jQuery替換事件處理程序？

回答

相關問題