.one()

Syntax and Description

.one(eventType[, eventData], handler)

eventType is a string containing a JavaScript event type such as click or submit.
eventData (optional) is a map of data that will be passed to the event handler.
handler is a function to execute at the time the event is triggered

Return value is the jQuery object, for chaining purposes.

one() attaches a handler to an event for the elements. The handler is executed at most once.

This method is identical to .bind(), except that the handler is unbound after its first invocation.

For example:


$('#foo').one('click', function() {
 alert('This will be displayed only once.');
});

This code is equivalent to the following:


//w  w w . ja v a 2  s. c om
$('#foo').bind('click', function(event) {
   alert('This will be displayed only once.');
   $(this).unbind(event);
});

Bind click event once

The following code uses one to bind event once.


<html> 
    <head>
        <style type="text/css">
        .div1 { <!--   w w  w .  jav  a  2 s.  co m-->
            width : 100; 
            height : 100; 
            background-color: blue;
         }
         .div2 { 
            width : 100; 
            height : 100; 
            background-color: red;
         } 
        </style> 
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script> 
        <script> 
            $(function(){
       
                $(".div1").one("click", function(){ 
                    $("body").append("<p>clicked div 1 </p>"); 
                });
                $(".div2").bind("click", function(){ 
                    $("body").append("<p>clicked div 2 </p>"); 
                }); 
            });
        </script> 
    </head> 
    <body>
        <div class="div1">j ava2s.com</div> 
        <div class="div2">jav a2s.com</div> 
    </body> 
</html>

Click to view the demo

The code above generates the following result.

Execute an event only once

The following code binds event handler for mouse enter with one(). And the mouse enter event will only execute once.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w  ww  .ja va  2  s .  co  m-->
             $("h1").one("mouseenter mouseleave", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text(str);
             });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>java2s.com</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Click once

The following code executes click event only once.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w  w  w.  ja  v a2 s.  co m-->
                $("div").one("click", function(){
                  alert("clicked.");
                });
        });
    </script>

  </head>
  <body>
    <body>
          <div>java2s.com</div>
    </body>
</html>

Click to view the demo

The code above generates the following result.