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的this说我需要提供一个字符串作为第二个参数，而不是jQuery对象（$(ev.target)），但如果我提供一个字符串，则没有值仅指单击的项目。

来自jQuery的文档：

要删除特定的委派事件处理程序，请提供选择器论点。选择器字符串必须与传递给的字符串完全匹配附加事件处理程序时的.on（）。删除所有委托来自元素的事件而不删除非委托事件，请使用特殊值“**”。

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

off documentation

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

除了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();
    }):
});

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

3 个答案: