匿名関数のイベントハンドラを正しく削除する

Question

jQueryを使用して匿名イベントハンドラを削除するにはどうすればよいか把握しようとしています。

私はjQueryオブジェクトを保持する変数を定義します。

var dom = $('#private-module'); 

その後、私のオブジェクト内に：

run: function() { 
    var button, that = this; 

    button = dom.append('<button class="btn">Click Me</button>'); 
    button.on('click', function(event) { 
     console.log('Clicked!'); 
     that.destroy(); 
    }); 
    }, 

    destroy: function() { 
    var button; 

    button = dom.find('.btn'); 
    button.off('click'); 
    } 

どんなに私は何をすべきか、私はボタンのクリックハンドラを殺すことはできません。スコープに関する私の理解のようなものには欠陥があります。この状況で、ハンドラを削除するのが好ましい方法は何ですか？私はイベントやあらゆる種類の名前空間を試してみましたが、運がないので、私が見落としたことは簡単なことです。おそらく、私はイベントハンドラのために匿名関数を使用してはいけません。ただ、.appendを使用するための私の推論へのボルト何かに

：ここ

http://jsperf.com/jquery-append-vs-appendto

は、最終的なソリューションです。

dom.append('<button class="btn">Send Message</button>'); 
button = dom.find('.btn'); 
button.on('click', function (event) { 
    sendTestMessage(); 
    that.destroy(); 
}); 

私も.oneメソッドを使用することについて同意し、理解します。ありがとうございました。

Answer 1

button = dom.append('<button class="btn">Click Me</button>'); 

DOM、ないボタンを返しますので、あなたはdomにイベントハンドラをバインド。

変更：

button = $('<button class="btn">Click Me</button>').appendTo(dom); 

そして、ここではworking demoです。 .on()の委任権限にこの感謝を行うには

button = dom.append('<button class="btn">Click Me</button>'); 

//a console.log(button) here reveals that button is "dom" 

//and thus you are adding a handler to "dom 
button.on('click', function(event) { 
    console.log('Clicked!'); 
    that.destroy(); 
}); 

片道あなたにハンドラをバインドしたい要素の子セレクタを追加することです：

Answer 2

問題はbuttonがdomない.btnであるということです第2のパラメータ。破壊で

button.on('click', '.btn' function(event) { 
    //the value of "this" in here is the ".btn" 
    console.log('Clicked!'); 
    that.destroy(); 
}); 

、我々は.btnに関する二番目のパラメータで.off()を使用します。

button.off('click', '.btn');