删除特定对象上的 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 的关闭文档：

To remove specific delegated event handlers, provide a selector argument. The selector string must exactly match the one passed to .on() when the event handler was attached. To remove all delegated events from an element without removing non-delegated events, use the special value "**".

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

Here's a JSFiddle of the code above

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

Answer 1

网上看了一遍，答案是不能！您可以删除全部或 none。解决方法可能如下所示。

$(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

问：必须使用委托事件吗？就像 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>

Answer 3

除了 lshettyl 所说的（当前顶部 post）- 另一个解决方法是将新的事件侦听器直接绑定到您尝试删除侦听器的元素并调用 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();
    }):
});

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

Remove jQuery delegated event handler on specific object

javascript

jquery

delegates

event-delegation