Question

在就绪功能中，我有一个点击功能绑定

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

});

dynamic点击事件不会触发，因为绑定div时没有此类元素。我不想为classClick类（动态或非动态）的所有元素触发事件。我怎么能这样做？

更新：此外，

我发现很难识别执行click事件的函数（来自大量代码）。如何采用更好的架构，以便找出将要执行的功能？

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

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

1 个答案: