Correctly remove anonymous function event handlers
<p>I'm trying to figure out how best to remove anonymous event handlers using jQuery.</p>

<p>I define a variable to hold my jQuery object:</p>

<pre><code> var dom = $('#private-module');
</code></pre>

<p>Later on in my object:</p>

<pre><code>  run: function () {
    var button, that = this; 

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

  destroy: function () {
    var button; 

    button = dom.find('.btn');
    button.off('click');  
  }
</code></pre>

<p>No matter what I do, I cannot kill the click handler on the button. Feels like my understanding here of scope is flawed. What is the preferred way, in this situation to remove the handler? I've tried namespacing the events and all sorts but no luck so I am guessing it's something simple that I've overlooked. Perhaps I shouldn't even be using anonymous functions for event handlers.</p>

<p>Just to bolt something on to my reasoning for using .append: </p>

<p><a href="http://jsperf.com/jquery-append-vs-appendto" rel="nofollow">http://jsperf.com/jquery-append-vs-appendto</a></p>

<p>Here is the final solution:</p>

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

<p>I also agree and understand about using the .one method. Thanks for that.</p>
