Javascript 按钮在jQuery中不起作用

我是jQuery新手，我编写了这段代码，在其中我开发了一个表单，其中包含一些输入按钮。有一个“取消”按钮，当点击它时，我希望表单被删除

这是我的密码：

$(document).ready(function(){
$(".newIdea_Button").click(function(){

    if (!new_idea_clicked)
    {
    $(document.body).append("<form>...some buttons here, one with the id cancel_idea_input</form>")
    }

});

$("#cancel_idea_input").click(function(){
    $('#new_idea_form').remove();

});


});

$（文档）.ready（函数（）{
$（“.newIdea_按钮”）。单击（函数（）{
如果（！单击新想法）
{
$（document.body）.append（“…此处有一些按钮，其中一个id为cancel\u idea\u input”）
}
});
$（“#取消(想法)输入”）。单击（函数（）{
$（'new'u idea'u form'）。删除（）；
});
});

问题是，在我看来一切正常，但当我在浏览器（谷歌浏览器或火狐浏览器）中打开代码时，当我点击“取消”按钮时，什么都没有发生。但当我复制并粘贴谷歌chrome控制台部分的第二个功能时，“取消”按钮就起作用了！ 有人能帮我找出我的代码有什么问题吗？

我想

\cancel\u idea\u input

按钮是您表单的一部分

因此，为了使绑定在动态添加的元素上工作，您应该执行以下操作：

$(document.body).on('click', "#cancel_idea_input", function(){
    $('#new_idea_form').remove();
});

您可以使用表单所在的任何元素，而不是

document.bod

y。

只需将

$("#cancel_idea_input").click(function(){
    $('#new_idea_form').remove();
});

在

附加
表单之后的
if
内部

别忘了
id

jQuery中的
单击（'click'）
是
的缩写

编辑：对动态生成的元素使用“单击”。假设您的包装器div具有类
outerselector

$('.outerselector').on('click', "#cancel_idea_input", function(){
    $('#new_idea_form').remove();
});

对非动态生成的元素使用on（'click'）

$("#cancel_idea_input").on('click', function(){
    $('#new_idea_form').remove();
});

谢谢Felix Kling，我学到了一些新东西。感谢您提供文档参考。
和相关文档：。在这里，您将看到以下语句：“请务必注意，
.on（）
只能在设置侦听器时存在的元素上创建事件侦听器。”这是因为创建事件时，页面上没有“取消”按钮。Try:$（文档）。在（“单击”，“取消想法输入”上，函数（）{$（“#新想法形式”）.remove（）；}）；你的回答很模糊
.click
只是
.on（'click'，…）
的简写。来自：“jQuery为大多数本机浏览器事件提供了方便的方法。这些方法-包括
.click（）
，
.focus（）
，
.blur（）
，
.change（）
，等等-是jQuery的
.on（）
方法的缩写。”确实，您必须使用
.on
进行事件委派，但是
上的
.on可用于不仅仅是事件委派。此外，您不会演示如何使用
上的
。进行事件委派。