.one()
マッチした要素に任意のイベントをバインドします。このメソッドでバインドされた処理は、一度だけ実行されます。
- .one( events [, data], handler(eventObject) ) 1.1追加
- .one( events [, selector] [, data], handler(eventObject) ) 1.7追加
- .one( events-map [, selector] [, data] ) 1.7追加
- デモ
.one( events [, data], handler(eventObject) ) 1.1追加
戻り値:jQuery
マッチした要素に任意のイベントをバインドします。このメソッドでバインドされた処理は、一度だけ実行されます。
引数 | 説明 |
---|---|
events |
"click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。 また、スペース区切りで複数のイベントを指定することも可能です。 |
[data] | イベントハンドラに渡すデータをマップ値で指定します。 |
handler(eventObject) | バインドさせた関数を指定するか、特別な値falseを指定します。 |
$("#foo").one("click", function() {
alert("This will be displayed only once.");
});
.one( events [, selector] [, data], handler(eventObject) ) 1.7追加
戻り値:jQuery
マッチした要素に任意のイベントをバインドします。このメソッドでバインドされた処理は、一度だけ実行されます。
引数 | 説明 |
---|---|
events |
"click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。 また、スペース区切りで複数のイベントを指定することも可能です。 |
[selector] | .on()によってイベントをバインドしたセレクタと同じセレクタを指定します。 |
[data] | イベントハンドラに渡すデータをマップ値で指定します。 |
handler(eventObject) | バインドさせた関数を指定するか、特別な値falseを指定します。 |
$("body").one("click", ".foo", function() {
alert("This displays once for the first .foo clicked in the body.");
});
.one( events-map [, selector] [, data] ) 1.7追加
戻り値:jQuery
キーと値の組み合わせでバインドされたイベントハンドラを削除します。
引数 | 説明 |
---|---|
events-map |
マップ値の組み合わせで、削除するイベントハンドラを指定します。 キーには、"click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。 また、スペース区切りで複数のイベントを指定することも可能です。 値には、事前にバインドされた関数を指定します。 |
[selector] | .on()によってイベントをバインドしたセレクタと同じセレクタを指定します。 |
[data] | イベントハンドラに渡すデータをマップ値で指定します。 |
デモ
各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.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>緑色の四角をクリック...</p>
<script>
var n = 0;
$("div").one("click", function() {
var index = $("div").index(this);
$(this).css({
borderStyle:"inset",
cursor:"auto"
});
$("p").text("インデックス#" + index + "のDIVをクリック。" +
" トータル" + ++n + "回クリック。");
});
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM