jQuery one() with Examples

jQuery Web Development Front End Technology

The one() method in jQuery is used to add one or more event handlers to selected elements. Remember, the event handler function runs only once for each element.

Syntax

The syntax is as follows −

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

Above, the event parameter is used to specify one or more events to attach to the elements, whereas function is used to specify the function to run when the event occurs.

Example

Let us now see an example to implement the jQuery one() method −

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("h2").one("click", function(){
         $(this).animate({fontSize: "+=10px"});
      });
   });
</script>
</head>
<style>
div {
   margin: 10px;
   width: 60%;
   border: 2px dashed orange;
   padding: 5px;
   text-align:justify;
}
</style>
<body>
<div>
<h2>Demo Heading 1</h2>
<h2>Demo Heading 2</h2>
<h2>Demo Heading 3</h2>
<h2>Demo Heading 4</h2>
</div>
<p>Click any h2 element above once.</p>
</body>
</html>

Output

This will produce the following output −

On clicking any h2 element, the font will increase −

AmitDiwan

Updated on: 30-Dec-2019

186 Views

Kickstart Your Career

Get certified by completing the course

Get Started