jQuery on click 複数

jQueryで複数要素のクリックイベントをまとめて取得する方法

同じクラス名を持つ複数のHTML要素に対して、jQueryを使って効率的にクリックイベントを取得・処理する方法を紹介します。

単一のクラス名で複数要素のクリックイベントを取得

  • $('.クラス名').on('click', function() { ... }); のように、jQueryセレクタでクラス名を指定することで、該当する全ての要素にクリックイベントを設定できます。
  • イベント発生時の処理は、function() 内に記述します。

thisキーワードでクリックされた要素を特定

  • イベント処理関数内で $(this) を使用することで、クリックされた要素自身を取得できます。
  • 取得した要素に対して、text() や val() など、jQueryのメソッドを使用して操作できます。

イベントの伝播と停止

  • event.stopPropagation(); を使用すると、クリックイベントの上位要素への伝播を停止できます。
  • 誤作動を防いだり、特定の要素のみにイベントを限定したい場合に有効です。

サンプルコード


<button class="target-button">ボタン1</button>
<button class="target-button">ボタン2</button>
<button class="target-button">ボタン3</button>

<script>
$('.target-button').on('click', function(event) {
  event.stopPropagation(); 
  alert($(this).text() + 'がクリックされました');
});
</script>

上記のコードは、「target-button」クラスを持つ全てのボタンにクリックイベントを設定し、クリックされたボタンのテキストをアラートで表示する例です。

その他関連キーワード

  • jQuery
  • クリックイベント
  • 複数要素
  • イベントハンドラ
  • thisキーワード
  • イベント伝播

関連情報

よくある質問

質問 回答
複数のクラスを持つ要素にクリックイベントを設定するには？ $('.クラス1.クラス2') のように、複数のクラス名をドットで繋いで指定します。
クリックされた要素の親要素を取得するには？ $(this).parent() を使用します。
クリックイベントを一度だけ実行するには？ one('click', function() { ... }) を使用します。

その他の参考記事:jquery on 複数