jQueryで一回だけ実行されるイベントを追加する方法

「何か要素がクリックされたとき、一回だけ処理をしたい」

そんな場合はjQueryのoneメソッドを使うと一回のみイベントを実行可能です。

使ってみると便利なので、そのoneメソッドの使い方とコード例を詳しく紹介

oneメソッドの使い方

oneメソッドはある要素に対してイベントを紐づけるためのメソッド

その点ではbindメソッドやonメソッドと機能的には同じです。

ただ1つ違うのはコールバックで渡した処理が一回しか実行されないこと

なので要素の初クリック時など特別な処理をしたいときに便利だと思います。

 

そしてoneメソッドでは次の2つの方法でイベント登録が可能

  • 要素に対して直接イベント登録
  • セレクタを使ってイベント登録

bindメソッドとonメソッドの違いでも書いたようにセレクタを使えるので、動的に追加されるような要素も対象にすることが可能です。

この2つの具体的なやり方やコード例は次の通り

要素に対して直接イベント登録

まず1つめはセレクタなしで直接要素に対してoneメソッドを呼び出す使い方

こちらは動的に追加される要素は対象にならないことに注意です。

 

具体的なコード例は次の通り

対象の要素がクリックされると「Good Bye」というアラートが出てきます。

その後は一切要素をクリックしても何も起こりません。

 

以上が要素に対して直接oneメソッドを呼び出す使い方

セレクタを使わないので現在ある要素に対してだけ有効です。

セレクタを使ってイベント登録

お次はセレクタ指定した要素にoneメソッドを呼び出しする使い方

こちらはonメソッドのように動的に追加した要素も対象になります。

 

具体的なコード例は次の通り

セレクタ指定する場合は one  の第二引数から指定すればOKです。

 

以上がセレクタ指定でoneメソッドを実行する方法

こちらは将来追加されるかもしれない要素も対象です。

oneメソッドの実用的なコード例

次にoneメソッドの実用的(かもしれない)コード例を少し紹介

例えば一度だけ要素がフェードアウト⇒フェードインするような処理をしたいとしましょう。

その場合のコード例は次の通り

 

今回用意するのは次のようなdiv要素です。

これらの要素がクリックされたとき、それぞれの要素をフェードアウト・フェードインさせます。

 

そして一回だけの処理をするために書いたのが次のコード

まずボタンが押されたら1000ミリ秒(1秒)かけてフェードアウト

それが終わったら1000ミリ秒(1秒)かけてフェードインさせてまた表示

こういう処理の流れになってます。

ちなみにセレクタを指定しているので要素をあとから追加する場合も安心です。

 

具体的にどのような動作をするかは次のCodePenで試してみてください。

See the Pen 【jQuery】oneメソッドの実用的な使い方 by ぴー助 (@pisuke-code) on CodePen.

エフェクトが終了した後に同じ要素をクリックしても何も起こりません。

こういう風に一度限定の処理だけさせたい場合にoneメソッドはすごく役立ちます。

ここまでのまとめ

以上oneメソッドの使い方についてまとめました。

一度しか処理されないのでボタンの2度押しを防ぐなどに使えるかもしれません。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください