如何在 jQuery 插件中绑定此事件处理程序？

Question

我正在学习 JavaScript 和 jQuery，所以如果这是一个愚蠢的问题，我提前道歉。

(function ($) {
  $.fn.addDiv = function () {
    this.append('<div></div>');
    return this;
  };
}(jQuery));

$('div').click(function () {
  $('body').addDiv();
});

在上面的代码中，我编写了一个简单的 jQuery 插件，它将 <div> 元素附加到 this 的当前值。

现在，在我单击一个元素并添加一些 <div> 元素后，我意识到单击处理程序与新添加的元素无关。这似乎是完全可以接受的，因为当处理函数被绑定时，它自然是只存在于 $('div') 对象中的那些。

现在，我知道将处理程序绑定到插件中的所有 <div> 元素非常简单，如下所示。

(function ($) {
  $.fn.addDiv = function () {
    this.append('<div></div>');
    $('div').click(function () {
      $('body').addDiv();
    }); // added this statement
    return this;
  };
}(jQuery));

但我确信有更好的方法来处理此类事件绑定。这显然重复了代码。 那么，将此类事件绑定到插件本身添加的元素的最佳做法是什么？

这是一个教育示例，请不要将其视为任何类型的用例，请给我替代解决方案。

http://jsbin.com/jokururiyaca/1/edit

编辑： 我知道有些人推荐使用.selector，但它在 jQuery 2 中已被弃用。此外，使用它并不会改变事件处理代码仍然重复的事实在插件中。

Answer 1

这是解决将点击处理程序重新绑定到所有元素的问题的一种方法。

您可以使用 $('<div></div>') 创建 DOM 元素，使用 $('<div></div>').click(...) 仅将点击处理程序添加到该元素，然后使用 $('<div></div>').click(...).appendTo("body") 将其附加到正文。

示例：

(function ($) {
  $.fn.addDiv = function () {
    $('<div></div>').click(function () {
      $('body').addDiv();
    }).appendTo("body");
    return this;
  };
}(jQuery));

通常Event Delegation 将用于处理未来元素的事件。

示例：

(function ($) {
  $.fn.addDiv = function () {
    this.append('<div></div>');
    return this;
  };
}(jQuery));

$(document).on("click", "div", function(){
  $('body').addDiv();
});