.on() 之后的 jQuery 3.x .off()答案

【问题标题】：jQuery 3.x .off() after .on().on() 之后的 jQuery 3.x .off()
【发布时间】：2018-01-28 20:43:48
【问题描述】：

我只是在 .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>

【问题讨论】：

标签： javascript jquery jquery-3

【解决方案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');

【讨论】：

@SalmanSharati 不要忘记将其中一个答案标记为正确

【解决方案2】：

您正在尝试删除 与最初分配的处理函数不同的处理函数。

相反，创建对函数的引用并通过该引用添加/删除它：

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

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

【讨论】：