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");
});

请参阅DEMO。

Answer 2

试试这个

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

同时使用.one（）和.on（） - 每个元素的一个处理程序

2 个答案: