MENU
  1. ホーム
  2. JS
  3. jQuery
  4. イベントハンドラーを要素にバインド

イベントハンドラーを要素にバインド

jQuery
2024.05.17

onメソッドは、指定したイベントを要素にバインドします。

on
記法

$(selector).on(event, childSelector, data, function () {
　処理
});
============================
selector : 対象の要素を指定するセレクター
event : バインドするイベントの種類
childSelector : 指定された子要素に対してイベントをデリゲート(省略可能)
data : イベントハンドラに渡される追加データ(省略可能)

デリゲート（イベントデリゲーション）とは、親要素にイベントハンドラを設定し、その親要素内の特定の子要素に対してイベントを効果的に処理する手法です。これにより、動的に追加された子要素にもイベントをバインドすることができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>childSelectorの使用例</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="button_container">
      <button class="child-button">ボタン1</button>
      <button class="child-button">ボタン2</button>
    </div>
    <button id="add_button">新しいボタンを追加</button>
    <div id="message" class="hidden">ボタンがクリックされました！</div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  // 親要素にクリックイベントをバインドし、子要素のボタンに対してイベントをデリゲートする
  $("#button_container").on("click", ".child-button", function () {
    $("#message")
      .removeClass("hidden")
      .text($(this).text() + "がクリックされました！");
  });

  // 新しいボタンを追加する
  let buttonCount = 2; // 初期ボタン数
  const maxButtons = 5; // 最大ボタン数

  $("#add_button").on("click", function () {
    if (buttonCount < maxButtons) {
      $("#button_container").append(
        '<button class="child-button">追加されたボタン' +
          (buttonCount + 1) +
          "</button>"
      );
      buttonCount++;
    } else {
      alert("これ以上ボタンを追加できません。");
    }
  });
});
.hidden {
  display: none;
}
出力結果
jQuery