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----!!!");
                });
            }
        });
    }