Rimuovere correttamente gestori di eventi con funzioni anonime

Question

Sto cercando di capire come rimuovere i gestori di eventi anonimi utilizzando jQuery.

ho definire una variabile per contenere il mio oggetto jQuery:

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

Più tardi nel mio oggetto:

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'); 
    } 

Non importa quello che faccio, non posso uccidere il gestore clic sul pulsante. Mi sembra che la mia comprensione qui della portata sia difettosa. Qual è il modo preferito, in questa situazione per rimuovere il gestore? Ho provato a trovare il nome degli eventi e di tutti i tipi, ma non ho avuto fortuna quindi immagino che sia qualcosa di semplice che ho trascurato. Forse non dovrei nemmeno usare le funzioni anonime per i gestori di eventi.

Giusto per Bolt qualcosa per il mio ragionamento per l'utilizzo di .Append:

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

Ecco la soluzione finale:

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

Sono anche d'accordo e capire sull'utilizzo del metodo .one . Grazie per quello.

Answer 1

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

restituisce il DOM, non il pulsante, in modo che il gestore di eventi legati al dom.

Passa a:

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

Ed ecco il working demo.

Answer 2

il problema è che button è dom e non .btn:

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(); 
}); 

un modo per fare questo grazie ai poteri di delega di .on() è quello di aggiungere il selettore figlio dell'elemento che si desidera associare il gestore come secondo parametro.

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

a distruggere, usiamo .off() con un secondo parametro di pertinenza .btn:

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