JQuery追加和绑定

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).

Answer 1

我认为你所追求的是新的jQuery 1.3功能之一 - 现场活动.请参见http://docs.jquery.com/Events/live.

这对我有用:

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

奖金:

我也使用FF 3.0.5,我在两个文本框之间有相同的空间.如果你的意思是在第二个文本框和按钮之间,那么我必须同意eimaj并说空白是原因.