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

イベントハンドラーを要素からアンバインド

jQuery
2024.05.17

offメソッドは、イベントハンドラを要素から削除するために使用します。

off
記法

$(selector).off(event, handler);
============================
event : 削除したいイベントの種類
handler : 削除したい特定のイベントハンドラ関数

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQueryのoffメソッドについて</title>
  </head>
  <body>
    <button id="click_me" class="enabled">クリックして</button>
    <button id="remove_handler">ハンドラを削除</button>
    <button id="reset_handler">ハンドラをリセット</button>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  // クリックイベントハンドラを追加
  function clickHandler() {
    alert("ボタンがクリックされました!");
  }

  // 初期状態でハンドラを追加
  $("#click_me").on("click", clickHandler);

  // クリックイベントハンドラを削除
  $("#remove_handler").on("click", function () {
    if ($("#click_me").data("handler-removed")) {
      alert("クリックハンドラは既に削除されています。");
    } else {
      $("#click_me").off("click", clickHandler).data("handler-removed", true);
      $("#click_me").removeClass("enabled").addClass("disabled");
      alert("クリックハンドラが削除されました。");
    }
  });

  // クリックイベントハンドラをリセット
  $("#reset_handler").on("click", function () {
    $("#click_me")
      .off("click")
      .on("click", clickHandler)
      .data("handler-removed", false);
    $("#click_me").removeClass("disabled").addClass("enabled");
    alert("クリックハンドラがリセットされました。");
  });
});
出力結果
jQuery