.one() method executes handler only once.

Syntax

.one(eventType[, eventData], handler)

Parameters

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

Return value

The jQuery object, for chaining purposes.

Description

Attach 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:


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

 $(this).unbind(event);

});

 
<html> 
    <head>
        <style type="text/css">
        .div1 { 
            width : 100; 
            height : 100; 
            background-color: blue;
         }
         .div2 { 
            width : 100; 
            height : 100; 
            background-color: red;
         } 
        </style> 
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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"></div> 
        <div class="div2"></div> 
    </body> 
</html>

Click to view the demo

Event executes once

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("h1").one("mouseenter mouseleave", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text(str);
             });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

one(type, data, fn): executed only once for each element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("div").one("click", function(){
                  alert("clicked.");
                });
        });
    </script>
<style>
  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
</style>
  </head>
  <body>
    <body>
          <div>asdf</div>
    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: