jQuery one()を使って、要素のイベントに1度だけ呼び出される関数をbindします。

サンプルのリスト(1)は、「on()」を使用し、リスト(2)は、「one()」を使用しています。いずれも各リスト要素をクリックするとピンクの下線を追加します。「…下線をまとめて消す」ボタンで下線を消すと、リスト(1)は、2度目も下線を追加できるのに対して、リスト(2)では、「…下線をまとめて消す」ボタンの操作とは無関係に、1度のみになります。

リスト(1)とリスト(2)のソース(script)

$(".list1 li").on("click", function(){
	$(this).css('border-bottom','2px solid #ff99ff');
});
$(".list2 li").one("click", function(){
	$(this).css('border-bottom','2px solid #ff99ff');
});

リスト(1)各項目クリックで下線追加

リスト(2)各項目クリックで下線追加(1回限り)

サンプルのリスト(3)は、「on()」を使用し、リスト(4)は、「one()」を使用しています。各リスト項目をクリックすると、赤字で「クリック済み」のテキストを追加します。何度もクリックすると、リスト(3)では「クリック済み」が続けて追加されてしまいますが、リスト(4)では1度のみの追加になります。

リスト(3)とリスト(4)のソース(script)

$(".list3 li").on("click", function(){
	$(this).append( '<span class="red"> ・クリック済み</span>');
});
$(".list4 li").one("click", function(){
	$(this).append( '<span class="red"> ・クリック済み</span>');
});

リスト(3)各項目クリックでコメント追加

リスト(4)各項目クリックでコメント追加(1回限り)

戻るボタン