One Time Event using jQuery .one() Method

You can prevent multiple clicks or restrict an event to just one by using jQuery .one() method or by combining the .bind() and .unbind() methods respectively. It would sometimes be necessary to disable the click event of a button or any element, once it has been clicked.

Facebook has an option, where you can invite your friends to visit a page. It shows multiple buttons against each friend in your profile. But it allows only a single click and there by the button is disabled, so as to restrict you from repeatedly clicking the button. Now this is just an observation and jQuery has methods just for that purpose.

If you are still using the .bind() and .unbind() methods, then its time you replace your code with .one() method. These functions basically unbind the event handler of an element once the event has occurred.

jQuery .one() method is comparatively an easy way to perform one single event, per element, per page. This method will not disable the element but will unbind a particular event associated with the element.

Using ".one()" method

Syntax

$(selector).one(event,data,function)

The .one() method takes 3 parameters.

The event parameter can be any valid events. Multiple events can added separated by a comma.

<!DOCTYPE html>
<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 

    <p>Click Me</p>
</body>

<script>
    $(document).ready(function() {
        $('p').one('click', function(event) {
            $(this).animate({
                width: '+=50px', 
                height: '+=50px',
                backgroundColor: '#999', 
                color: '#FFF'
            }).html('Click Disabled');
        });
    });
</script>
</html>

Try it

Multiple events using jQuery .one() method

<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 

    Enter your name: <input type="text" id="tb" value="" /><br />

    <p><label id="label1"></label></p> 
    <label id="label2"></label>
</body>
<script>
    $(document).ready(function() {
        $('#tb').one('mouseenter keyup', function() {
            $('#label1').text('mouseenter event');
            if ($(this).val() != '') 
                $('#label2').text('keyup event: ' + $(this).val());
        });
    });
</script>
</html>

Try it

The events mouseenter and keyup have been attached to a textbox control and will be executed once per event.

Using jQuery .bind() and .unbind() method

Combining these 2 methods will give us similar results as we have seen above. There is hardly any difference in performance in both the ways, except that former .one() method has been improved to a label that requires less coding.

<script>
    $('p').bind('click', function() {
        $(this).unbind('click');
        
        $(this).animate({
            width: "+=50px", height: "+=30px",
            backgroundColor: '#999', color: '#FFF' 
        }).html('Click Event Disabled');
    });
</script>

Conclusion

No wonder jQuery will keep upgrading itself and it won’t be surprising if they come up with a new version of what we have discussed in this article. Let us know if you come across a new method to accomplish a onetime event. The usefulness of these JavaScript methods may not be visible regularly or on every page, but it helps.

← PreviousNext →