jQuery Event one() Method

The jQuery event one() method is used to bind one or more event handlers for the selected elements. It specifies a function to run when the event occurs.

The event handler function specified by this method is executed only once for each element.

Syntax

Following is the syntax of the jQuery event one() method −

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

Parameters

This method accepts three parameters named 'event', 'data', and 'handler', which are described below −

event − It specifies one or more event types, separated by spaces, such as 'click', 'dblclick', or custom event names.
data (optional) − Additional data is passed to the function.
handler − The function to execute when the event occurs.

Return Value

This method does not return any value but binds events for the selected element.

Example 1

The following program demonstrates the usage of the jQuery event one() method −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Click on this paragraph</p>
    <script>
        $('p').one("click", function(){
            $(this).css({"color": "green", "font-size": "20px"});
        });
    </script>
</body>
</html>

Output

After executing the above program, a paragraph is displayed. When the mouse pointer clicks on it, the text's color and size will change −

When the mouse pointer clicks on the displayed paragraph −

Example 2

Attach multiple events to the selected element.

Following is another example of the jQuery event one() method. We use this method to attach multiple events to selected elements that <button> −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        button{
            padding: 10px;
            width: 100px;color;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <p>Click or double-click on the submit button.</p>
    <button>Submit</button>
    <script>
        $('button').one({click: function(){
            $(this).css("background-color", "green");
            alert("The button was single-clicked.");
        }, dblclick: function(){
            $(this).css("background-color", "blue");
            alert("The button was double-clicked.");
        }});
    </script>
</body>
</html>

Output

The program displays a button, and when it is either clicked or double-clicked, a pop-up alert appears on the browser screen indicating the type of event that has occurred −

Example 3

Passing data parameter value to the event handler function.

In the example below, we use the jQuery one() method to bind an event handler to

element and display the passed data value on the screen −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <style>
        div{
            width: 150px;
            padding: 10px;
            background-color: green;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Mouseenter on the below box to know the TP full form.</p>
    <div>TP</div>
    <script>
        $('div').one("mouseenter", {fullform: "TutorialsPoint"}, function(event){
            $('div').text(event.data.fullform);
        });
    </script>
</body>
</html>

Output

Once the above program is executed, a <div> element is displayed with the text "TP". When the mouse pointer enters the 'div' element, the full form of "TP" will be displayed within the same <div> element −

jquery_ref_events.htm

Print Page