JavaScript PR

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

記事内に商品プロモーションを含む場合があります

jQueryのクリックイベント$().on(‘click’,~ を$().off()を使って削除する方法をご紹介します。

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

※処理を実行させるクリックボタン(.tagutuika)のCSS記述です。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

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

※class=”tagutuika”クリックするとクリックエリア要素出力先(class=”addarea”)に追加タグ要素を出力します。

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

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

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

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

※cass=”tagutuika”クリックすると.html()を使ってclass=”addarea”エリアに追加タグ要素を出力します。
 .html()を使って追加したタグ要素にalert()メッセージを表示するクリックイベント「$().on(‘click’~」を設定してます。このクリックイベントを設定する前処理としてoff()を行い一度クリックで発生したクリックイベントを削除します。
 この前処理off()を行わないと、class=”tagutuika”タグを複数回クリックするたびにクリックイベント「$().on(‘click’~」が設定され、alertメッセージがクリック回数分も表示されることになります。

<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>

jQueryのoff()を使ってon()イベント削除するデモページ

jQueryのoff()を使ってon()イベント削除するデモページ

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。