「何か要素がクリックされたとき、一回だけ処理をしたい」
そんな場合はjQueryのoneメソッドを使うと一回のみイベントを実行可能です。
使ってみると便利なので、そのoneメソッドの使い方とコード例を詳しく紹介
oneメソッドの使い方
oneメソッドはある要素に対してイベントを紐づけるためのメソッド
その点ではbindメソッドやonメソッドと機能的には同じです。
ただ１つ違うのはコールバックで渡した処理が一回しか実行されないこと
なので要素の初クリック時など特別な処理をしたいときに便利だと思います。
そしてoneメソッドでは次の２つの方法でイベント登録が可能
- 要素に対して直接イベント登録
- セレクタを使ってイベント登録
bindメソッドとonメソッドの違いでも書いたようにセレクタを使えるので、動的に追加されるような要素も対象にすることが可能です。
この２つの具体的なやり方やコード例は次の通り
要素に対して直接イベント登録
まず１つめはセレクタなしで直接要素に対してoneメソッドを呼び出す使い方
こちらは動的に追加される要素は対象にならないことに注意です。
具体的なコード例は次の通り
|
1 2 3 4 5 |
$(function(){ $('.once_button').one('click', function(){ alert('Good Bye!'); }); }); |
対象の要素がクリックされると「Good Bye」というアラートが出てきます。
その後は一切要素をクリックしても何も起こりません。
以上が要素に対して直接oneメソッドを呼び出す使い方
セレクタを使わないので現在ある要素に対してだけ有効です。
セレクタを使ってイベント登録
お次はセレクタ指定した要素にoneメソッドを呼び出しする使い方
こちらはonメソッドのように動的に追加した要素も対象になります。
具体的なコード例は次の通り
|
1 2 3 4 5 |
$(function(){ $(document).one('click', '.once_button', function(){ alert('Good Bye!'); }); }); |
セレクタ指定する場合は one の第二引数から指定すればOKです。
以上がセレクタ指定でoneメソッドを実行する方法
こちらは将来追加されるかもしれない要素も対象です。
oneメソッドの実用的なコード例
次にoneメソッドの実用的（かもしれない）コード例を少し紹介
例えば一度だけ要素がフェードアウト⇒フェードインするような処理をしたいとしましょう。
その場合のコード例は次の通り
今回用意するのは次のようなdiv要素です。
|
1 2 3 4 5 |
<div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> |
これらの要素がクリックされたとき、それぞれの要素をフェードアウト・フェードインさせます。
そして一回だけの処理をするために書いたのが次のコード
|
1 2 3 4 5 6 7 |
$(function(){ $(document).one('click', '.box', function(){ $(this).fadeOut(1000, function(){ $(this).fadeIn(1000); }); }); }); |
まずボタンが押されたら1000ミリ秒（１秒）かけてフェードアウト、
それが終わったら1000ミリ秒（１秒）かけてフェードインさせてまた表示
こういう処理の流れになってます。
ちなみにセレクタを指定しているので要素をあとから追加する場合も安心です。
具体的にどのような動作をするかは次のCodePenで試してみてください。
See the Pen 【jQuery】oneメソッドの実用的な使い方 by ぴー助 (@pisuke-code) on CodePen.
エフェクトが終了した後に同じ要素をクリックしても何も起こりません。
こういう風に一度限定の処理だけさせたい場合にoneメソッドはすごく役立ちます。
ここまでのまとめ
以上oneメソッドの使い方についてまとめました。
一度しか処理されないのでボタンの２度押しを防ぐなどに使えるかもしれません。
