js STUDIO

.unbind()

要素にバインドしていた処理を削除します。

.unbind( [eventType] [, handler(eventObject)] ) 1.0追加

戻り値:jQuery

要素にバインドしていた処理を削除します。

引数 説明
[eventType] 'click'や'submit'等のjavaScriptイベントの文字列を指定します。
[handler(eventObject)] 実行を取り消したい関数を指定します。

引数を何も指定せずにunbindメソッドを使用すれば、その要素のイベントハンドラを全て削除します。 

$('#foo').unbind();

$("p").unbind( "click" )

.unbind( eventType, false ) 1.4.3追加

戻り値:jQuery

要素にバインドしていた処理を削除します。

引数 説明
eventType 'click'や'submit'等のjavaScriptイベントの文字列を指定します。
false bindする際に、このようにfalseを指定していると戻り値にfalseを返すだけの関数を指定した事と同じ効果を得られますが、 それを同じように指定することで取り消します。

.unbind( events ) 1.0追加

戻り値:jQuery

要素にバインドしていた処理を削除します。

引数 説明
events javaScriptのイベントオブジェクトを指定します。

補足事項

自分が意図していないコードからイベントハンドラが登録されている可能性があるため、 規模の大きい、または拡張性を高くしたいアプリケーションにおいて下記のような書き方は推奨されません。 

$('#foo').unbind('click');

次のように関数に名前を付けてイベントハンドラの登録、削除することが推奨されています。 

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

下記のように同じ関数そのものを指定するコードは動作しない事に注意してください。 

$('#foo').bind('click', function() {
  alert('いろはにほへと　ちりぬるを');
});

// 上記で登録したイベントハンドラは削除されません！
$('#foo').unbind('click', function() {
  alert('いろはにほへと　ちりぬるを');
});

名前空間について

unbindのためにイベントハンドラへの参照を維持する代わりに、名前空間を代わりに使用し 参照範囲を狭める事ができます。名前空間はイベントハンドラをバインドする際にドット(.)区切りで定義します。 詳しくは.bind()をご覧ください。

次のようにバインドされた場合

$('#foo').bind('click.myEvents', handler);

このようにすればイベントハンドラを削除できますが、他のコードがclickに対して イベントハンドラのバインド行っていた場合、そのイベントハンドラも削除してしまいます。 

$('#foo').unbind('click');

次のようにすることで、名前空間の一致するイベントハンドラのみを削除します。 

$('#foo').unbind('click.myEvents');

また、下記のようにすればイベントのタイプに関係なく該当する名前空間に紐付くイベントハンドラを 全て削除します。 

$('#foo').unbind('.myEvents');

イベントオブジェクトについて

3つ目のイベントオブジェクトを使用する方法は、自身のイベントハンドラを参照して削除したい場合などに使用します。 下記の例では3回イベントハンドラが実行されたら、自身のイベントハンドラを削除する処理になっています。 

var timesClicked = 0;
$('#foo').bind('click', function(event) {
  alert('いろはにほへと　ちりぬるを');
  timesClicked++;
  if (timesClicked >= 3) {
    //イベントオブジェクトを指定して削除
    $(this).unbind(event);
  }
});

デモ

色のついたボタンをクリックして、イベントハンドラの登録と削除の処理を交互に実行します。

<!DOCTYPE html>
<html>
<head>
<style>
  button { margin:5px; }
  button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">何もしません...</button>
<button id="bind">clickを登録</button>
<button id="unbind">clickを削除</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
  .text("クリック!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
  .text("何もしません...");
});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM