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没有注意到它在哪里？

Answer 1

您需要使用live：

将处理程序绑定到所有当前和未来匹配元素的事件（如单击）。

听起来像赢家。所以只需替换这一行：

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

这样，改为使用live：

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

编辑：

就排序而言，显然你使用的插件并没有在内部使用live的优势。然后，唯一的解决方案是在添加新表行后再次调用init代码。你可以使用一些插件做到这一点，其他一些不能很好地处理它。让我们知道怎么回事。只需添加：

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

在#addMore点击处理程序中，在您追加newTrack。

之后

Answer 2

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

Answer 3

您必须在JQuery中刷新Sortable。

$（ “＃磁道”）排序（ “刷新”）;

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

Answer 4

tableDnD插件有一个方法，可能已添加，因为这个问题最初发布，但为了完整性，我将在这里添加：

.tableDnDUpdate()

正如tableDnD文档所述，

导致表更新其行，以便拖放功能有效，例如，如果您添加了一行。

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

4 个答案:

编辑：