使用 jquery 克隆表行的 Tablesorter 错误

Question

我试图弄清楚为什么只有在使用 tablesorter 函数时才会重复行。这是有问题的页面：

http://www.ffxiv-gathering.com/40.php

要复制错误，请执行以下操作：

1. 点击未损坏标签上的任意行
2. 转到“观看”标签
3. 点击该行将其删除
4. 转到未受破坏的选项卡并单击一行...然后单击另一行
5. 转到观看标签

您可以看到最初单击的第一行是重复的。我终其一生都无法弄清楚为什么。删除 tablesorter 函数可以解决问题......但是，我希望它保留，因为它按状态对表进行排序（从而将当前和即将到来的节点移动到顶部）。

这是运行这个的 jquery：

$(document).ready(function() {
var items = [];

$("#myTable-unspoiled >tbody >tr").on("click", function() {
    var newTr = $(this).closest("tr").clone().addClass("remove");

    items.push(newTr);
    newTr.appendTo($("#myTable-watching"));

    $(".remove").click(function(){
    $(this).closest('tr').remove();

    var rowCount = $('#myTable-watching >tbody >tr').length;
    $('#counter').html(rowCount);
    });

    var rowCount = $('#myTable-watching >tbody >tr').length;
    $('#counter').html(rowCount);

    $("#myTable-watching").tablesorter({ 
    // sort status column, then item; ascending
    sortList: [[6,0],[0,0]]
    });
});
});

删除它可以解决问题，但会阻止我进行排序：

$("#myTable-watching").tablesorter({ 
    // sort status column, then item; ascending
    sortList: [[6,0],[0,0]]
});

这是一个没有 tablesorter 插件的页面。

http://www.ffxiv-gathering.com/40-test.php

要查看我的问题...单击彩色行，然后单击白色行，然后单击另一个彩色行并查看“观看”选项卡。

Answer 1

当您从表中添加和/或删除行时，请确保触发“更新”而不是重新初始化表排序器...

newTr.appendTo($("#myTable-watching"));
$("#myTable-watching").trigger("update");

和

$(".remove").click(function(){
    var $table = $(this).closest('table');
    $(this).closest('tr').remove();
    $table.trigger('update');
    // ...
});