jQuery 1.7在表之间来回移动行

我有两个表，我正在尝试在-

searchResultsTable

和

SelectedCustomerTable

之间移动行。这是一项非常简单的任务——只要能够在两个表之间连续地前后移动行即可

我将多行从

searchResultsTable

移动到

SelectedCustomerTable

中，反之亦然。因此，用户可以使用“添加”和“删除”按钮在两个表之间连续来回移动行

当

searchResultsTable

选择了行并且您希望将这些行移动到

SelectedCustomerTable

时，可以使用添加按钮。这很有效

“删除”按钮用于选择

SelectedCustomerTable

中的行，并将其删除/移回

searchResultsTable

。这似乎不起作用。在前后移动行几次之后，事件似乎丢失了，它只是停止工作。我试图在jQuery1.7中使用

.on

事件，但运气不好。“在两个表之间移动行”功能不会反复工作。就像它只工作一次，然后它就不会一次又一次地工作

这是我的jQuery代码——有人能看到问题所在并提供一种方法让它反复工作吗？一次又一次——意思是——如果用户愿意，在两个表之间永远来回移动行

<script type="text/javascript">
    $(function () {
        $('#searchResultsTable').on('click', function (e) {
            bindTableEvents();
        });
        $('#selectedCustomersTable').on('click', function (e) {
            bindTableEvents();
        });

        bindTableEvents();


        function bindTableEvents() {
            var $t1 = $('#searchResultsTable');
            var $t2 = $('#selectedCustomersTable');
            alert('in');
            setupTable($t2);
            setupTable($t1);
        }

        function setupTable($table) {
            $table.initializeTable({
                navigate: {
                    control: { keyboard: true, mouse: true },
                    select: { multiple: true }
                }
            });

            $table.on('mouse', function (e, event) {
                if (event.which == 1 && !event.ctrlKey && !event.shiftKey) {
                    var $selected = $table.selected();
                    if ($selected.length == 1) {
                        !$selected.hasClass('active');
                    }
                }
            });

            $table.on('keyboard', function (e, event) {
                var $selected = $table.selected();
                switch (event.which) {
                    case 13:
                        //ENTER
                        if ($selected.length == 1) {
                            !$selected.hasClass('active');
                        }
                        if ($selected.length > 0) {

                        }
                        break;
                    case 46:
                        //DELETE
                        if ($selected.length > 0) {

                        }
                        break;
                }
            });
        }

        $('#addButton').click(function () {
            var selectedRows = $('#searchResultsTable').selected();
            $('#selectedCustomersTable').append(selectedRows.removeClass('focus').remove());
        });

$('#removeButton').click(function () {
            var selectedRows = $('#selectedCustomersTable').selected();
            $('#searchResultsTable').append(selectedRows.removeClass('focus').remove());
            });

    });
</script>

$（函数（）{
$（“#searchResultsTable”）。在（'click'，函数（e）上{
bindTableEvents（）；
});
$（'selectedCustomerTable'）。在（'click'，函数（e）{
bindTableEvents（）；
});
bindTableEvents（）；
函数bindTableEvents（）{
var$t1=$（“#searchResultsTable”）；
变量$t2=$（'selectedCustomerTable'）；
警惕（‘in’）；
设置表（2美元）；
设置表（1美元）；
}
函数设置表（$table）{
$table.initializeTable({
导航：{
控件：{键盘：真，鼠标：真}，
选择：{multiple:true}
}
});
$table.on（'mouse'，函数（e，事件）{
if（event.which==1&&！event.ctrlKey&&！event.shiftKey）{
var$selected=$table.selected（）；
如果（$selected.length==1）{
！$selected.hasClass（'active'）；
}
}
});
$table.on（'键盘'，函数（e，事件）{
var$selected=$table.selected（）；
开关（event.which）{
案例13：
//进入
如果（$selected.length==1）{
！$selected.hasClass（'active'）；
}
如果（$selected.length>0）{
}
打破
案例46：
//删除
如果（$selected.length>0）{
}
打破
}
});
}
$（“#添加按钮”）。单击（函数（）{
var selectedRows=$（“#searchResultsTable”）.selected（）；
$（'#selectedCustomerTable'）.append（selectedRows.removeClass（'focus'）.remove（））；
});
$（“#移除按钮”）。单击（函数（）{
var selectedRows=$（“#selectedCustomerTable”）.selected（）；
$（'#searchResultsTable'）.append（selectedRows.removeClass（'focus'）.remove（））；
});
});

我也在这个问题上挣扎。但我想直接移动这一行。以下是我的解决方案：

$(document).ready(function() {
    $("#searchResultsTable tbody").on("click","tr", function() {
        var tr = $(this).closest("tr").remove().clone();
    $("#selectedCustomersTable tbody").append(tr);
    });
    $('#selectedCustomersTable table tbody').on("click","tr", function() {
            var tr = $(this).closest("tr").remove().clone();
            $("#searchResultsTable tbody").append(tr);
    }); 
});

这里的要点是在tbody上绑定事件处理，它处理表行上的点击。因此，插入到第二个表中的新HTML元素保留了向后移动的功能，因为tbody隐藏了事件