jquery - .one() と .on() を一緒に使用 - 各要素に対して 1 つのハンドラー

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 のクリック ハンドラーを 1 回だけ実行したいのですが、jQuery で他の要素からハンドラーを削除したくありません。したがって、最初のボタンをクリックすると、そのボタンのハンドラは削除されますが、2 番目のボタンは削除されません。2 番目のボタンをクリックすると、2 番目のボタンのハンドラーが削除されますが、最初のボタンは削除されません。

また、クラス「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() {
    // ...
});