クリックされると凹むように見えるdivを作成します。
クリックイベントが呼び出されるのは1度だけで、押されたボタンは以降はクリックしても何も起きないようにします。
Events/API/jQuery
one(type, [data], fn)
各要素のイベントに、1度だけ呼び出される関数をbindします。
登録したコールバック関数は、各要素で1度だけ呼び出されます。それ以外の動作については、bind関数と同じです。
イベントハンドラにはeventオブジェクトが渡され、イベントやバブリングをキャンセルすることができます。あるいは、戻り値にfalseを返すことで両方をキャンセルすることが可能です。
多くの場合、コールバック関数は無名関数で作成できるでしょう。それが不可能な場合は関数ポインタを渡すことになりますが、その場合は第二引数を用いて追加データを受け渡すことが可能です。（その場合、関数ポインタは第三引数になります）
登録したコールバック関数は、各要素で1度だけ呼び出されます。それ以外の動作については、bind関数と同じです。
イベントハンドラにはeventオブジェクトが渡され、イベントやバブリングをキャンセルすることができます。あるいは、戻り値にfalseを返すことで両方をキャンセルすることが可能です。
多くの場合、コールバック関数は無名関数で作成できるでしょう。それが不可能な場合は関数ポインタを渡すことになりますが、その場合は第二引数を用いて追加データを受け渡すことが可能です。（その場合、関数ポインタは第三引数になります）
サンプル
サンプル1
<div></div> <div></div> <div></div> <div></div> <div></div> <p>Click a green square...</p>
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.");
});
[全コードを表示]
[実行結果を単体で表示]