Question

Is there a way to use one() with event delegation? like on() or live() so that it will be applied to DOM elements that are not created at the binding time?

Answer 1

Yes. From the jQuery .one() docs:

The second two forms, introduced in jQuery 1.7, are identical to .on() except that the handler is removed after the first time the event occurs at the delegated element, whether the selector matched anything or not. For example:

    $("#foo").one("click", function() {
      alert("This will be displayed only once.");
    });
    $("body").one("click", "#foo", function() {
      alert("This displays if #foo is the first thing clicked in the body.");
    });

After the code is executed, a click on the element with ID foo will display the alert. Subsequent clicks will do nothing.

This means that, when you use the form $(el).one('click', '.selector', handler) it will work like live — the event handler is bound to el (which has to exist in the DOM) but the event handler will only be executed on clicks on .selector, regardless of whether that element exists during your call to .one().

Edit: It seems that jQuery’s documentation on this is wrong — at least, the way I interpret it. According to the alert above,

“This displays if #foo is the first thing clicked in the body.”

Which makes me think that if anything else is clicked in the body first, the event handler will be removed and won’t fire again. This is not the case — the event handler will exist until #foo is clicked one time.

See this fiddle for a demonstration.