jquery offメソッド

TOPページに戻る > jquery入門

jquery off()メソッド

offメソッドは、要素のイベントハンドラを削除します
on()で登録したイベントハンドラを削除できるメソッドです
イベント名はclick、dblclick、mousedown、mouseup、mouseover、mouseout、mousemove、mouseenter、mouseleave、blur、focus、load、resize、scroll、unload、change、select、submit、keydown、keypress、keyup、errorで指定します

on()で登録したbind()の機能を削除

$("セレクタ").off("イベント名")

on()で登録したlive()の機能を削除

$(document).off("イベント名","セレクタ")

on()で登録したdelegate()の機能を削除

$("セレクタ").off("イベント名","セレクタ")

登録したイベントハンドラを削除する

on()で登録したbind()の機能を削除します。削除ボタンを最初に押すと処理が削除されます

jquery

$(function() {
	$("#button").on("click",function(){
	$("#hoge").text("クリックされました");
	});
	$("#button3").click(function(){
	$("#button").off("click");
	});
});

css

#hoge{
 border: 1px solid;
 padding: 10px;
 }

html

<button id="button">ボタン</button>
<button id="button3">削除ボタン（先に押すと？）</button>
<div id="hoge">テキスト</div>

サンプル

ボタン 削除ボタン（先に押すと？）

要素を限定してイベントを実行する

セレクタで指定したHTML要素の中のbutton要素に限定してイベントを実行します
delegate()の機能です。動的に追加された要素からでも処理を実行できます
削除ボタンでon()で登録したイベントハンドラを削除します

jquery

$(function() {
	$("#box").on("click","button",function(){
    $(this).after("<br><button>出現した要素からもイベント実行できます</button>");
    });
    $("#button4").click(function(){
	$("#box").off("click","button")
	$("#box button").text("イベントハンドラを削除しました");
	});
});

css

#hoge{
 border: 1px solid;
 padding: 10px;
 }

html

<div id="box">
<button>ボタン</button>
<br>
<button id="button4">削除ボタン</button>
</div>

サンプル