Question

I have the following 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>

I want to have a click handler for button.foo only execute once, but I don’t want jQuery to remove the handlers from other elements. So when you click the first button, it removes the handler for that button, but not the second button. When you click the second button, it removes the handler for the second button, but not the first button.

Also, when any buttons with the class “foo” are added to the table, I want it to add a click handler that will be removed the first time it is used, and again, not remove other handlers.

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

The above code doesn’t work because it removes all handlers the first time any element is clicked. Is there a way to accomplish what I’m asking easily?

Answer 1

You can remove the class after the click event.

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

See DEMO.