Question

I want to have an event handler that executes only once and then unbinds itself from all the elements it was bound to.

I know of .one() but when using it “The handler is executed at most once per element“.

Is there a “built-in” way to bind an event handler to multiple elements and have it removed automatically from all of the once it is executed on any one of them?

Answer 1

Easy. Just unbind the event handler inside the callback function. Like this:

$('p').on('click', function(){
  alert('I appear only one time');
  $('p').off('click'); // Removes the event. So, it will never be executed again.
})

This script will remove all events of type click, and that is a bit aggresive. Check the documentation for off and unbind for more info.