javascript - 单击使用JQuery动态创建的HTML元素

This question already has answers here:

How do I attach events to dynamic HTML elements with jQuery? [duplicate]
                                
                                    （8个答案）
                                
                        
                                6年前关闭。
            
                    
我希望能够单击我动态创建的元素并创建警报，但似乎无法弄清楚。我已经看过很多类似的关于如何使用.on的线程，但是我只能使它适用于静态元素。提前致谢！

<span id="about">About</span>

<div id="lhn"></div>

和JavaScript：

$(document).ready(function () {

    $("#about").click(function () {

        $("#lhn").append("<div id='#child'>Child</div>");

        $("#lhn").on("click", "#child", function () {
            alert("Child has been clicked");
        });

    });

});

最佳答案

将事件绑定到您的about单击处理程序之外。同样，创建元素时，您的ID应该为child而不是#child：

$(document).ready(function() {
    $("#lhn").on("click", "#child", function () {
        alert("Child has been clicked");
    });

    $("#about").click(function () {
        $("#lhn").append("<div id='child'>Child</div>");
    });
});