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" />

当我单击该按钮时，确实会将新列表添加到列表中，但单击“删除”按钮不会执行任何操作。

我如何使这项工作？

奖励：使用“<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，并说空白是原因。

Answer 2

#add添加到节点树（DOM），但 .remove仅应用于所有现有元素，类“删除”一次（可能是onload）。使用live也可以将处理程序添加到新元素中。

（奖励：尺寸/渲染问题只是空格：添加这样的空间“有些文字”在Ff3.0.5中适用于我）

JQuery追加和绑定

2 个答案: