JQuery的append和bind方法

Question

我是一位有用的助手，可以为您翻译文本。

我有一个包含元素的无序列表，我想在末尾添加一个项目。以下是当前的代码：

初始列表：

<ul id="all">
  <li>
    Some text <input type="button" class="remove" value="-" />
  </li>
  <li>
    Some text <input type="button" class="remove" value="-" />
  </li>
</ul>

删除列表项的代码：

$(".remove").click(function() {
  $(this).parent().remove();
});

添加新列表项的代码如下：

$("#add").click(function() {
  $("#all").append(
    "<li>"
    + "Some text"
    + "<input type=\"button\" class=\"remove\" value=\"-\" />"
    + "</li>"
  );
});

添加新列表项的按钮：

<input type="button" id="add" value="Add" />

当我点击按钮时，确实会向列表中添加一个新的列表项，但是点击删除按钮没有任何反应。

如何使其正常工作？

---

奖励：将“Some text”更改为“<input type="text" /> <input type="text" />”，你会发现新增加的两个输入框与最初的输入框之间的距离不同。为什么？（注意：使用Firefox 3.0.5）

- pek

Answer 1

我认为你需要的是jQuery 1.3的新功能之一 - live事件。请参见http://docs.jquery.com/Events/live。

这对我有效：

$(".remove").live("click", function() {
  $(this).parent().remove();
});

奖励：

我也在使用FF 3.0.5，两个文本框之间的空间相同。如果您指的是第二个文本框和按钮之间的空间，则我必须同意eimaj的说法，即空白是原因。

- Matthew Maravillas

---

我有旧版本的 jQuery。我更新了它，现在它可以正常工作。 - pek

Answer 2

#add 添加到节点树(DOM)中，但是 .remove 只应用于所有已经存在的带有 "remove" 类名的元素一次(可能是在页面加载时)。使用 live 也会将处理程序添加到新元素中。

(奖励: 大小/渲染问题只是空格：像这样添加一个空格 "Some text " 对我在 Ff3.0.5 中有效)

- eimaj