JQuery.off でイベントがうまく消せなかった話

JQueryでイベントハンドラーを付けたり消したり

JQueryである要素のイベントハンドラーを設定/削除する場合、以下のようにすると思う。

JQueryでイベント設定/削除

	$('#hoge').on("click", function(){
		alert("hogehoge----!!!");
	});

	$('#hoge').off("click");

このような方法でイベントハンドラーが削除できなかった。

function内で動的にon/off

以下のソースのように、onload時にあるボタンにonでイベントを仕掛けて、ある条件の場合はそのイベントを破棄、新たな別の動作をするイベントを張り付ける、といった処理を別のfunctionに切り出し、これを順番に呼び出した。

onloadでイベントを設定

	// セットするファンクション
	function setHoge() {
		$(document).ready(function () {
			$('#hoge').on("click", function(){
				alert("hogehoge----!!!");
			});
		});
	}
	// 破棄/新たに設定するファンクション
	function changeHoge() {
		$(document).ready(function () {
			if ($('#hoge').val() != 'hoge') {
				$('#hoge').off("click");
				$('#hoge').on("click", function(){
					alert("no---hoge----!!!");
				});
			}
		});
	}

こうした場合にうまくイベントハンドラーが削除されなかった。。。
（#実際のコードとは異なるため、上記条件で正常に動作するかも。。。動作確認はしていない）

#名前空間(namespace)を設定しon/off
いろいろと調べた結果、以下のようにイベントハンドラーに名前空間を指定できるそうな。
参照：http://semooh.jp/jquery/cont/doc/namespaced_event/

namespace付きでイベント設定/削除

	$('#hoge').on("click.hoge", function(){
		alert("hogehoge----!!!");
	});

	$('#hoge').off("click.hoge");

名前空間を付けることで正しくイベントハンドラーの設定/削除ができた。

namespace付きでonloadでイベントを設定

	function setHoge() {
		$(document).ready(function () {
			$('#hoge').on("click.hoge", function(){
				alert("hogehoge----!!!");
			});
		});
	}
	function changeHoge() {
		$(document).ready(function () {
			if ($('#hoge').val() != 'hoge') {
				$('#hoge').off("click.hoge");
				$('#hoge').on("click.hoge", function(){
					alert("no---hoge----!!!");
				});
			}
		});
	}