javascript - 正确删除匿名函数事件处理程序

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，而不是按钮，因此您将事件处理程序绑定(bind)到 dom。

更改为:

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

这里是 working demo .