Избегайте повторного связывания событий для динамически добавленных элементов DOM?

Question

В готовой функции У меня есть функция щелчка связывания

$(function(){ 
    $(".classClick").click(function(){ 
    alert("Clicked"); 
    }); 
    $(selector).append("<div id="dynamic" class="classClick">Hello</div>");//Added after binding 

}); 

dynamic События щелчка не сработает, потому что не было ни одного такого элемента в то время как связывание div. Я не хочу запускать событие для всех элементов с классом classClick (динамический или нет). Как я могу это сделать?

Update: Кроме того,

мне было трудно определить функцию, которая выполняется событие щелчка (из большого набора кода). Как я могу принять лучшую архитектуру, чтобы я мог узнать, какая функция будет выполнена?

Answer 1

Попробуйте это:

$(function(){ 
    $('body').on('click', ".classClick", function() { 
     alert("Clicked"); 
    }); 
    $(selector).append('<div id="dynamic" class="classClick">Hello</div>');//Added after binding 

}); 

Update

Если я понимаю ваше второе заявление, у вас возникли проблемы с организацией кода в связи с bloaty/Спагетти природы JQuery.

Я полагаю, путь, который позволит улучшить читаемость бы динамически создать объект с ссылкой событий в нем, чтобы для облегчения читаемости, например:

$(function() { 

    var functionToCall = function() { 
     alert('clicked'); 
    }; 

    $('<div/>') 
     .prop('id', 'dynamic') 
     .text('Hello') 
     .click(function() { 
      functionToCall(); // This gives a little more visibility to what's happening on-click 
     }) 
     .appendTo(selector); 
});