javascript - 如何在使用 JQuery 动态创建 dom 元素后隐藏它？

Question

我正在尝试构建一个表单，用户可以在其中通过单击“添加选项”按钮来添加文本字段。他们还可以通过 Jquery 即时创建的“删除选项”链接以及文本字段来删除添加的字段。

JavaScript:

$(document).ready(function(){
    $("#add_option").click(function()
      {
        var form = $("form");
        var input_field = '<input type="text" />';
        var delete_link = '<a href="#">remove</a>';
        form.append(input_field + delete_link);

        return false;
    });

    $("a").click(function()
    {
        alert('clicked');
        return false;
    });
});

当我单击“add_option”按钮时，会出现一个新的文本字段和“delete_link”。但是，当单击由 JQuery 创建的“delete_link”时，浏览器会跟随该链接，而不是启动显示“已单击”的弹出窗口。

如何在使用 JQuery 动态创建 dom 元素后隐藏它？

Answer 1

我会使用委托(delegate)，因为它使用的冒泡更少:

$(document).delegate("a", "click", function(){
 alert('clicked');
});

编辑，这是您需要更改的代码:

$(document).ready(function(){
       $("#add_option").click(function(){
               var form = $("form");
               var input_field = '<input type="text" />';
               input_field.addClass = "dynamic-texfield";
               var delete_link = '<a href="#" class="delete-trigger">remove</a>';
               form.append(input_field + delete_link);

               return false;
           });

然后是委托(delegate)部分:

$(document).delegate(".delete-trigger", "click", function(){
     alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});