jquery - 附加到动态添加的元素

Question

我有一个在页面加载时存在的 div。我附加了一个按钮和另一个按钮。然后我想单击按钮并将内容附加到 .

到目前为止，第一部分正在工作，但我无法附加到任何动态创建的元素。

$(document).ready(function () {

    // THIS WORKS
    $("#Value").change(function () {
        var value = $("#Value").val();
        $("#Question_Field").empty();
        for (var i = 1; i <= value; i++) {
            $("#Question_Field").append('<input type="button" id="button" /><div id="test"></div>');
        }
    });

    // THIS DOES NOT WORK
    $("#test").click(function () {
        console.log("Click");
        ("#test").append(STUFF);
    });
});

它甚至没有记录点击。

Answer 1

有两个主要问题。

1. 当您挂钩事件时，#test尚不存在任何元素，因此没有任何东西被挂钩。

2. 您正在使用相同的id.

此外，您的电话开头append缺少 a 。$

您可以使用事件委托修复第一个（此代码也修复了append）：

$(document).on('click', '#test', function () {
    console.log("Click");
    $("#test").append(STUFF);
});

这告诉 jQuery 将click事件挂钩 on document，但仅当事件源自或通过与给定选择器 ( #test) 匹配的元素时才触发处理程序，因为它冒泡到文档。

要解决第二个问题，多个元素相同id，您需要更改输出元素的循环。很可能你想使用一个类而不是一个id.

Answer 2

click只能处理调用时存在的元素。您应该根据您的 jQuery 版本检查.live() http://api.jquery.com/live/或.on() http://api.jquery.com/on/ 。