Elimine correctamente los controladores de eventos de funciones anónimas

Question

Estoy tratando de encontrar la mejor manera de eliminar manejadores de eventos anónimos usando jQuery.

que definen una variable para contener mi objeto jQuery:

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

Más adelante en mi objeto:

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

No importa lo que hago, no puedo matar al controlador de clic en el botón. Siente que mi entendimiento aquí del alcance es defectuoso. ¿Cuál es la forma preferida, en esta situación para eliminar el controlador? Intenté ponerle nombre a los eventos y todo tipo pero no tuve suerte, así que supongo que es algo simple que he pasado por alto. Tal vez ni siquiera debería usar funciones anónimas para los manejadores de eventos.

Sólo para atornillar a algo en mi razonamiento para el uso de .Append:

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

Aquí está la solución final:

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

También estoy de acuerdo y entiendo sobre el uso del método de .one . Gracias por eso.

Answer 1

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

devuelve el dom, no el botón, lo que unido al controlador de eventos en el dom.

Cambiar a:

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

Y aquí es la working demo.

Answer 2

el problema es que button es dom y no .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(); 
}); 

una manera de hacer esto gracias a los poderes de la delegación de .on() es agregar el selector hijo del elemento que desea enlazar el controlador como segundo parámetro.

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

en destruir, utilizamos .off() con un segundo parámetro correspondiente a .btn:

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