javascript - 按钮在 jQuery 中不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

Events triggered by dynamically generated element are not captured by event handler (5 个回答)

已关闭 9 年前。

我是 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();

});


});

问题是，一切对我来说似乎都是正确的，但是当我在浏览器(谷歌浏览器或火狐浏览器)中打开代码时，当我单击“取消”按钮时，什么也没有发生。但是当我在谷歌浏览器的控制台部分复制并粘贴第二个功能时，“取消”按钮就起作用了!有人可以帮我找出我的代码有什么问题吗？

Answer 1

我猜#cancel_idea_input按钮是您表单的一部分。

因此，为了使绑定(bind)能够在动态添加的元素上工作，您应该这样做:

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

您可以使用表单所在的任何元素来代替 document.body。