jQuery .one() event method
Syntax and Description
.one(eventType[, eventData], handler)
eventTypeis 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.handleris 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:
//ww w. jav a 2s . com
$('#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 { <!-- ww w. j a va 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>
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(){<!-- w w w . j av a 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 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(){<!-- ww w.ja v a 2s .c o m-->
$("div").one("click", function(){
alert("clicked.");
});
});
</script>
</head>
<body>
<body>
<div>java2s.com</div>
</body>
</html>