单击使用 JQuery 动态创建的 HTML 元素 [重复]答案

【问题标题】：Click on dynamically created HTML elements using JQuery [duplicate]单击使用 JQuery 动态创建的 HTML 元素 [重复]
【发布时间】：2013-06-14 00:48:11
【问题描述】：

我希望能够单击我动态创建的元素并创建警报，但我似乎无法弄清楚。我查看了一堆关于如何使用 .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");
        });

    });

});

【问题讨论】：

切换顺序搞定了，谢谢大家！很抱歉 ID 错字，很好。

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

您编写的代码存在多个问题。

首先

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

应该是

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

其次 - HTML 页面中的 ID 应该是唯一的

所以替换

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

与

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

第三

我看到您已经在委派该事件，因此将点击事件移至 click event 之外。否则事件将在每次点击时多次绑定到元素。

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

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

【讨论】：

如果我只追加一个孩子，我不是还想使用ID而不是类吗？
如果它只是一个元素，那么您可以使用ID
酷。还在学习，想确认一下。

【解决方案3】：

我用于附加元素的一种技术是创建元素，然后附加它。

var element = $("<div id='child'>Child</div>").appendTo("#lhn").on("click", function() {
    alert("Child has been clicked");
});

【讨论】：

【解决方案4】：

使用这个简单的代码，

$("#child).live("click",function(){
    alert();
});

【讨论】：