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

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

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

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

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

<>这是一个教育的例子，请不要认为它是任何一种用例，给我其他的解决方案。

---

Edit:我知道有些人建议使用

.selector

，但jQuery 2中不推荐使用它。此外，使用它不会改变事件处理代码在插件中仍然重复的事实。

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

您可以使用

$（''）

创建DOM元素，使用

$（''）将单击处理程序仅添加到该元素。单击（…）

，然后使用

$（''）将其附加到主体。单击（…）.appendTo（“主体”）

示例：

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

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

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

（函数（$）{
$.fn.addDiv=函数（）{
$（''）。单击（函数（）{
$（'body'）.addDiv（）；
}).附于（“主体”）；
归还这个；
};
}（jQuery））；

通常用于处理未来元素上的事件

示例：

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

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

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

（函数（$）{
$.fn.addDiv=函数（）{
此。附加（“”）；
归还这个；
};
}（jQuery））；
$（文档）。在（“单击”，“div”，函数（）上）{
$（'body'）.addDiv（）；
});

这非常有趣。非常感谢。