删除特定对象上的 jQuery 委托事件处理程序

Question

我使用单个选择器将委托事件处理程序附加到页面上的许多元素。由于事件是针对单个元素触发的，我想仅关闭该元素的事件处理程序基于某些条件逻辑。 这意味着我不一定要在第一次点击时禁用该事件。但是如果不关闭所有这些，我不知道该怎么做。

HTML：

<button>One</button>
<button>Two</button>
<button>Three</button>

JS：

$(document).on('click', 'button', function(ev) {
    // doesn't work because argument needs to be a string
    $(document).off('click', $(ev.target));

    // doesn't do what I want b/c turns off events on all buttons, not just this one
    $(document).off('click', 'button');

    // doesn't work because event is on document, not button
    $(ev.target).off('click');
});

jQuery 的 off documentation 说我需要提供一个 string 作为第二个参数，而不是 jQuery 对象 ($(ev.target))，但如果我提供一个字符串，则没有任何值仅指点击的项目。

来自 jQuery 的关闭文档：

要删除特定的委托事件处理程序，请提供一个选择器 争论。选择器字符串必须与传递给的字符串完全匹配 .on() 附加事件处理程序时。删除所有委派 在不删除非委托事件的情况下从元素中获取事件，使用 特殊值“**”。

那么如何关闭特定元素的委托事件处理程序？

Here's a JSFiddle of the code above

更新：根据提供的初步答案，添加了一些不起作用的选项示例。

Answer 1

在网上阅读后，答案是你不能！您可以删除全部或不删除。解决方法可能类似于以下内容。

$(document).on('click', '.btn', function (ev) {
    alert('pressed');
    $(this).removeClass("btn");
});

演示@Fiddle

示例 HTML：

<button class="btn">One</button>
<button class="btn">Two</button>
<button class="btn">Three</button>

Answer 2

除了 lshettyl 所说的（当前的顶部帖子）之外，另一个解决方法是将新的事件侦听器直接绑定到您尝试删除侦听器并在其中调用 stopPropagation() 的元素。

这样做的目的是防止事件沿 DOM 向上传播并到达最初绑定到文档的事件处理程序。此外，这将允许您在单击按钮时保留一些功能，例如提醒用户该按钮已被单击 - 或类似的效果。

$(document).on('click', 'button', function(ev) {
    // Your logic to occur on button click

    // Prevent further click on just this button
    $(this).click(function(event) {
        event.stopPropagation();
    }):
});

Answer 3

问题：你必须使用委托事件吗？就像 LShetty 所说，不可能为单个元素删除委托事件。您要么删除整个事件委托，要么离开它。您可以尝试使用不同的选择器，就像在这个例子中一样

$('button').on('click', function(ev) {
    $('#output').append('Clicked! ');
    $(this).off('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<button>One</button>
<button>Two</button>
<button>Three</button>
<div id="output"></div>