javascript - jQuery 添加的表单元素无法被选中

Question

如果描述不合适，我深表歉意。很难描述发生了什么。

我已经设置了一个 jsFiddle here .

function addNewForm() {
    $('body').html(function () { //display log in form
        return "<input type=\"text\" placeholder=\"Word or Phrase\" id=\"prompt\" />\n" +
            "<textarea id=\"answer\" placeholder=\"Answer text\"></textarea>\n" +
            "<input type=\"button\" id=\"addnew\" value=\"Add This!\" />\n" +
            "<p>&nbsp;</p>";
    });
}

$("#addnew").click(function () {
    $("p").html("ADD NEW CLICKED<br />");
});

$("a").click(function () {
    addNewForm();
});

我的语法正确吗？出于某种原因，$("#addnew").click 在其自身函数之外生成时有效，但按钮停止工作，因为我已经整理了我的代码并将其置于其自身的函数中。 jQuery 可能无法识别通过函数创建的元素是否有原因？

干杯!

Answer 1

当您尝试附加 onclick 时事件处理程序到 #addnew , 该元素当时不存在。
将表单添加到 DOM 或使用 delegated events 时需要附加它

$(document).on("click", "#addnew", function () {
    $("p").html("ADD NEW CLICKED<br />");
});

您可能还希望在单击 <a> 时阻止页面重新加载链接

$("a").click(function (e) {
    e.preventDefault();
    addNewForm();
});

修复了 jsfiddle:https://jsfiddle.net/5rb6koog/