jQueryのoff()を使ってon()イベントを削除する方法｜DAD UNION

この記事では、jQueryのクリックイベントを「$().on(‘click’, ～)」で設定し、不要になったときに「$().off()」を使用して削除する方法を解説します。
ボタンをクリックするたびに意図せずイベントが積み重なってしまうことを防ぐための基本的な対策方法です。これを理解することで、より安定したインタラクティブなWebページを作成できるようになります。

Contents

jQueryのoff()を使ってon()イベントを削除するCSSの記述
jQueryのoff()を使ってon()イベントを削除するHTMLの記述
on()クリックイベントをoff()を使って削除するJavaScript記述
jQueryのoff()を使ってon()イベント削除するデモページ
まとめ

jQueryのoff()を使ってon()イベントを削除するCSSの記述

まず、動作確認のためのボタン（.tagutuika）にデザインを適用しましょう。以下のCSSコードは、クリックボタンに見た目を追加するための記述です。必要に応じて変更してください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tagutuika{
  padding: 4px;
  width: 400px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #cccccc;
}
.addclk{
  padding: 4px;
  width: 450px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #4DA6FF;
}
</style>

.tagutuika：クリックボタンのスタイル設定。背景色を灰色にして、中央配置します。
.addclk：クリックエリアを追加するボタンのデザインで、青色の背景を指定しています。

jQueryのoff()を使ってon()イベントを削除するHTMLの記述

次に、HTML部分のコードを示します。このコードでは、「.tagutuika」ボタンをクリックすることで「.addarea」に新しい要素が追加されるように設定しています。

<h1>以下のグレー箇所をクリックするとその下にon('click'～ クリックイベントを設定したタグ要素が追加されます。</h1>

<div class="tagutuika">ココをクリックすると、↓にクリックエリアが追加されます。</div>

<div class="addarea"></div>

class=”tagutuika”：クリックすると要素が追加されるボタンです。
class=”addarea”：クリックイベントで追加される要素が挿入される場所です。

on()クリックイベントをoff()を使って削除するJavaScript記述

次にJavaScriptのコードです。まず、jquery-2.2.0.min.jsファイルを読み込みます。
「.tagutuika」をクリックするたびに、on(‘click’～で追加されたイベントが積み重ならないよう、off()で一度クリックイベントを削除してから再設定する仕組みです。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(".tagutuika").click(function(){

    $(".addarea").html('<div class="addclk">この追加エリアをクリックするとalertメッセージが表示されます。</div>');

    $('body').off();  //off()で↓のクリックイベントを削除

    $("body").on('click', '.addclk', function(){
      alert("追加されたエリアがclickされました！");
    });

  });
</script>