jquery - 避免为动态添加的 DOM 元素重复绑定事件？

Question

在准备好的功能中，我有一个点击功能绑定

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

});

dynamicclick 事件不会触发，因为绑定div. 我不想为所有具有classClick类（动态或非动态）的元素触发事件。我怎样才能做到这一点？

更新：另外，

我发现很难识别执行点击事件的函数（从大量代码中）。我怎样才能采用更好的架构，以便我可以找出将执行哪个功能？

Answer 1

试试这个：

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

});

更新

如果我理解您的第二个陈述，那么由于 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);
});