Як пов'язати цей обробник подій у плагіні jQuery? - javascript, jquery, html, css, jquery-плагіни

Я вивчаю JavaScript та jQuery, тому заздалегідь прошу вибачення, якщо це дурне питання.

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

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

У наведеному вище коді я написав простий плагін jQuery, який додає a <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. Крім того, його використання не змінює того факту, що код обробки подій все ще дублюється в плагіні.

Відповіді:

2 для відповіді № 1

Це один із способів вирішити проблему повторного прив’язки обробника кліків до всіх елементів.

Ви можете створити елемент 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();
});

---