删除使用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没有注意到它在那里？

Answer 1

你需要使用live:

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

听起来像赢家.所以只需替换这一行:

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

有了这个,live改为使用:

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

编辑:

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

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

在#addMore追加后,单击处理程序内部newTrack.