jquery - 一起使用 .one() 和 .on() - 每个元素一个处理程序

Question

我有以下 HTML：

<table>
    <tr>
        <td><button class="foo" type="button">Click Me</button></td>
    </tr>
    <tr>
        <td><button class="foo" type="button">Click Me</button></td>
    </tr>
</table>

我想让 button.foo 的点击处理程序只执行一次，但我不希望 jQuery 从其他元素中删除处理程序。因此，当您单击第一个按钮时，它会删除该按钮的处理程序，但不会删除第二个按钮。当您单击第二个按钮时，它会删除第二个按钮的处理程序，但不会删除第一个按钮。

此外，当将任何具有“foo”类的按钮添加到表中时，我希望它添加一个单击处理程序，该处理程序将在第一次使用时被删除，并且再次不删除其他处理程序。

$("table").one("click", "button.foo", function() {
    // ...
});

上面的代码不起作用，因为它在第一次单击任何元素时删除了所有处理程序。有没有办法轻松完成我的要求？

Answer 1

您可以在活动结束后删除课程click。

$("table").on("click", "button.foo", function() {
    alert("click!");
    $(this).removeClass("foo");
});

见演示。

Answer 2

试试这个

$("table button.foo").one("click", function() {
    // ...
});