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/

Answer 2

解决方案在这里：

https://jsfiddle.net/wvepd6ge/7/

添加按钮时，需要附加如下事件：

function addNewClicked() {
    $('.result').html("ADD NEW CLICKED<br/>");
}

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

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

2 个答案: