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

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

1 个答案: