jQuery one()を使って、要素のイベントに1度だけ呼び出される関数をbindします。
サンプルのリスト(1)は、「on()」を使用し、リスト(2)は、「one()」を使用しています。いずれも各リスト要素をクリックするとピンクの下線を追加します。「…下線をまとめて消す」ボタンで下線を消すと、リスト(1)は、2度目も下線を追加できるのに対して、リスト(2)では、「…下線をまとめて消す」ボタンの操作とは無関係に、1度のみになります。
$(".list1 li").on("click", function(){ $(this).css('border-bottom','2px solid #ff99ff'); }); $(".list2 li").one("click", function(){ $(this).css('border-bottom','2px solid #ff99ff'); });
サンプルのリスト(3)は、「on()」を使用し、リスト(4)は、「one()」を使用しています。各リスト項目をクリックすると、赤字で「クリック済み」のテキストを追加します。何度もクリックすると、リスト(3)では「クリック済み」が続けて追加されてしまいますが、リスト(4)では1度のみの追加になります。
$(".list3 li").on("click", function(){ $(this).append( '<span class="red"> ・クリック済み</span>'); }); $(".list4 li").one("click", function(){ $(this).append( '<span class="red"> ・クリック済み</span>'); });