How to call click or any event only once in jQuery

In one my project, there was requirement where I had to perform some activites once user loads the particular div at first time and I had completed that code with some more lines of code as compare to the code which I am sharing now.

You know the on() method of jQuery, if not you can read more about it here, on() method attaches event handlers to the selected element as from jQuery version 1.7 it also provides all functionality required for attaching event handlers including support for old bind(),delegate() and live() method.

Using on() method you can attach event handler to element and using off() method you can remove bound events like below to have functionality of showing or executing an event only once.

$("#btnClick").on( "click", function(e) {
    alert( "This alert will be displayed only once." );
    $(this).val("No use of clicking now!");
    $(this).off(e);
});

You can achieve same functionlity using one() method provided by jQuery and code will get changed like below.

$("#btnClickOne").one( "click", function(e) {
    alert( "This alert will be displayed only once." );
    $(this).val("No use of clicking now!");
});

Check live fiddle of the above code.

If you check the above code carefully one() method gives same behaviour but there is no need to attach and deattach the event explicitely as it handles it internally.

Hope this simple and short information has added something in your knowledge bank. Thanks.