使用jQuery添加的表格行删除出现问题

Question

我是一个jQuery新手，我遇到了一个小问题。

首先，我有一个带有5行默认行的表格。使用名为“Table Drag'n'Drop”的插件可以对其进行排序。该表格中的一列包含一个链接X，单击该链接会删除表格行。

表格如下：

<table id="tracks">
  <thead>
    <tr>
      <th>Title</th>
      <th>File</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr class="track">
      <td><input type="text" /></td>
      <td><input type="file" /></td>
      <td><a href="#" class="deleteme">X</a></td>
    </tr>
  </tbody>
</table>

tr.track在代码中重复了五次。这些元素可以通过点击X轻松地进行拖动和删除。

以下是jQuery代码：

// makes the table sortable
$("#tracks").tableDnD();

// adds more rows (just a link)
$("#addRow").click(function() {
    newTrack = 'same code as tr.track'
    $("tbody").append(newTrack);
    return false;
});

// delete rows
$("a.deleteme").click(function() {
    $(this).parents("tr.track").fadeOut("fast", function() {
        $(this).remove();
        return false;
    });
});

当我添加新的表格行时，这一行无法通过单击X进行排序或删除。似乎jQuery没有注意到它的存在？

- rebellion

Answer 1

你需要使用 live：

为所有当前和未来匹配的元素绑定事件处理程序（例如click）。

听起来很不错。所以只需替换此行：

$("a.deleteme").click(function() {

使用 live 替代：

$("a.deleteme").live('click', function() {

编辑：

就排序而言，显然你正在使用的插件没有内部使用 live 的优势。唯一的解决方案是在添加新表格行后再次调用初始化代码。某些插件可以很好地处理这个问题，而其他一些则无法很好地处理。请告诉我们情况如何。只需添加以下内容：

$("#tracks").tableDnD();

在 #addMore 单击处理程序内，在附加了 newTrack 后。

- Paolo Bergantino

---

我花了太长时间找到链接，你比我更快地找到了它。 - RedWolves

谢谢，这使它工作了！唯一的问题是该行不再可排序。 - rebellion

DnD插件内部不得使用live。您需要再次调用$("#tracks").tableDnD();。 - Paolo Bergantino

Answer 2

tableDnD插件有一个方法，可能是自从最初发布这个问题以来添加的，但为了完整起见，我在此处添加它：

.tableDnDUpdate()

根据tableDnD文档所述，如果您添加了一行，则会导致表格更新其行，以使拖放功能正常工作。

- awj

Answer 3

你需要使用live将当前和未来的元素绑定到事件。

- RedWolves

---

谢谢您的快速回复，你们真是太快了！ - rebellion

Answer 4

你需要在 JQuery 中刷新可排序组件。

$("#tracks").sortable("refresh");

假设您正在使用开箱即用的Sortable插件。.tableDnD看起来像是一个自定义扩展方法。

- nuhusky2003