.one( events [, data ], handler )Returns: jQuery

Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

The .one() method is identical to .on(), except that the handler for a given element and event type is unbound after its first invocation. For example:

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

After the code is executed, a click on the element with ID foo will display the alert. Subsequent clicks will do nothing. This code is equivalent to:

1
2
3
4
 
$( "#foo" ).on( "click", function( event ) {
  alert( "This will be displayed only once." );
  $( this ).off( event );
});

In other words, explicitly calling .off() from within a regularly-bound handler has exactly the same effect.

If the first argument contains more than one space-separated event types, the event handler is called once for each event type.

1
2
3
 
$( "#foo" ).one( "click mouseover", function( event ) {
  alert( "The " + event.type + " event happened!" );
});

In the example above the alert could be displayed twice due to the two event types (click and mouseover).

Examples:

Tie a one-time click to each div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 5px;
    float: left;
    background: green;
    border: 10px outset;
    cursor:pointer;
  }
  p {
    color: red;
    margin: 0;
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>Click a green square...</p>
 
<script>
var n = 0;
$( "div" ).one( "click", function() {
  var index = $( "div" ).index( this );
  $( this ).css({
    borderStyle: "inset",
    cursor: "auto"
  });
  $( "p" ).text( "Div at index #" + index + " clicked." +
    " That's " + (++n) + " total clicks." );
});
</script>
 
</body>
</html>

Demo:

To display the text of all paragraphs in an alert box the first time each of them is clicked:

1
2
3
 
$( "p" ).one( "click", function() {
  alert( $( this ).text() );
});

Event handlers will trigger once per element per event type

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>one demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="count">0</div>
<div class="target">Hover/click me</div>
 
<script>
var n = 0;
$(".target").one("click mouseenter", function() {
  $(".count").html(++n);
});
</script>
 
</body>
</html>

Demo: