Question

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

});


});

事情似乎对我来说一切正确，但是当我在浏览器中打开代码（google chrome或firefox）时，单击“取消”按钮时没有任何反应。但是当我在谷歌浏览器的控制台部分复制并粘贴第二个功能时，“取消”按钮就可以了！有人可以帮我弄清楚我的代码有什么问题吗？

Answer 1

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

因此，为了使绑定能够处理动态添加的元素，您应该这样做：

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

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

Answer 2

刚刚放

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

在if表单

之后，在append内{p>

并且不要忘记id

<强> DEMO

Answer 3

jQuery中有click的{{1}}简写。

编辑：使用on（'click'）动态生成元素。假设你有一个包含类on('click')

的包装div

outerselector

使用on（'click'）表示非动态生成的元素。

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

谢谢Felix Kling，我学到了一些新东西。感谢您提供文档参考。

按钮不能在jQuery中工作

3 个答案: