.one()

Categories: Events > Event Handler Attachment

.one( eventType, [ eventData ], handler(eventObject) ) 官网原E文： jQuery

描述： 附加一个处理事件到元素。处理函数在每个元素上最多执行一次。

version added: 1.1.one( eventType, [ eventData ], handler(eventObject) )

eventType一个包含一个或多个JavaScript事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。

eventData将要传递给事件处理函数的数据映射。

handler(eventObject)每当事件触发时执行的函数。

这种方法是和.bind()相同的，但该处理函数第一次调用后就解除绑定。举个例子：

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

在代码执行后，点击id为foo的元素将显示警报。随后的每次点击什么都不做。此代码是等效于：

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

换句话说，从一个定期绑定处理函数显式调用.unbind()具有完全相同的效果。

Examples:

Example: Tie a one-time click to each div.

<!DOCTYPE html>
<html>
<head>
  <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="http://code.jquery.com/jquery-latest.min.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:

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