我正在学习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
编辑：我知道有人建议使用.selectorjQuery ，但在jQuery 2中已弃用。此外，使用它不会更改事件处理代码仍在插件内重复的事实。
这是您可以解决将点击处理程序重新绑定到所有元素的问题的一种方法。
您可以使用创建DOM元素，使用$('<div></div>')将点击处理程序添加到该元素中，$('<div></div>').click(...)然后使用将其添加到正文中$('<div></div>').click(...).appendTo("body")。
例子：
(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();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句