jQuery 3.x .off（）.on（）後.on（）

Question

我簡單地在.on（）方法之後使用.off（）方法.click（）方法。
我真的很困惑，爲什麼click（）事件觸發！

$('span').on('click', function() { $('p').text("You Clicked!") }); 
 

 
$('span').off('click', function() { 
 
    $('p').text("Ha Ha Ha!") });

span{ 
 
    background-color:#ac0; 
 
    padding:5px; 
 
    cursor:pointer; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<span>Click Me!</span> 
 
<p>*****</p>

Answer 1

你誤解的功能是什麼在off()方法結束。這不是一個回調，它是一個事件處理程序。

該函數應該與您最初設置的函數具有相同的事件處理函數。這樣做是爲了讓您可以刪除單個點擊處理程序。

function handlerA(e) { 
    console.log('heard by A'); 
} 

function handlerB(e) { 
    console.log('heard by B'); 
} 

// add both handlers to click events 
$('span').on('click', handlerA); 
$('span').on('click', handlerB); 

// remove the first click event only, leaving the second 
$('span').off('click', handlerA); 

以上只會在點擊時記錄heard by B。

要刪除全部點擊處理程序，您需要完全省略該功能。

$('span').off('click'); 

Answer 2

您正在嘗試刪除比原先分配不同處理函數。

相反，創建函數的引用，並添加/通過參考其刪除：

var clickHandler = function() { $('p').text("You Clicked!") }; 

$('span').on('click', clickHandler); 
$('span').off('click', clickHandler);