jQuery - one( type, [data], fn ) Method

Description

The one( type, [data], fn ) method binds a handler to one or more events to be executed once for each matched element. The handler is executed only once for each element. Otherwise, the same rules as described in bind() apply.

Possible event values: blur, focus, load, resize, scroll, unload, click etc.

Syntax

Here is the simple syntax to use this method −

selector.one( type, [data], fn )

Parameters

Here is the description of all the parameters used by this method −

type − An event type.
data − This is optional parameter and represents additional data passed to the event handler as event.data.
fn − A function to bind to the event on each of the set of matched elements.

Example

Following is a simple example a simple showing the usage of this method. Here it binds click event with each <div> element. Try to click any square two times, it won't react unlike bind() method −

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').one('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

This will produce following result −

jquery-events.htm