如何使用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”时，浏览器会跟随链接而不是启动弹出窗口显示“clicked”。

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

- ismaelsow

Answer 1

我会使用委托，因为它使用更少的冒泡：

$(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;
           });

接下来是委托部分：

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

- ant

---

我不知道委托函数，我在Jquery编程方面还很新。谢谢，它解决了我的问题！ - ismaelsow

Answer 2

尝试使用“live”绑定<a>的处理程序。

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

你可能应该用类或其他方式来限定那些 <a> 链接。

- Pointy

Answer 3

我不明白为什么你要使用一个 <a> 标签作为 jQuery 中执行函数的按钮。在框架中，你已经有了完全绕过 HTML 传统方法所需的所有工具。

只需在想要看起来“可点击”的按钮上定义 css cursor:pointer，如果你喜欢的话可以添加一些文本装饰，然后用 jQ 定义函数即可：

$('.remove-button').live('click', function() {
    $(this).parent().remove();
}

- dclowd9901