Question

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

    });

});

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

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

Answer 3

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

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

Answer 4

用户这个简单的代码，

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

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

4 个答案: