避免爲動態添加的DOM元素重複綁定事件？

Question

在就緒功能我有一個點擊功能結合

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

}); 

的dynamic單擊事件不會觸發，因爲沒有這樣的元素，同時結合了div。我不想爲所有具有classClick類的元素（動態或不動態）觸發事件。我怎樣才能做到這一點？

更新：此外，

我發現很難確定執行的單擊事件（從一大組代碼）的功能。我怎樣才能採用更好的架構，以便我能找出哪個函數將被執行？如果我的理解，您有代碼組織麻煩你的第二個聲明

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

}); 

更新

由於jQuery的的bloaty /意大利麪條性質：

Answer 1

試試這個。

我想辦法這將提高可讀性，將動態地創建一個含有該事件的參考對象，以便更容易的可讀性，例如：

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