Question

我在这里创建了一个jsFiddle：http://jsfiddle.net/markrummel/SEQbd/。

我有三个表行，每个表都有一个UP和DOWN按钮。通过单击“向下”按钮，行将在其下方的行中切换。通过单击“向上”按钮，行将切换为其上方的行。

我的代码中的所有内容都可以上下切换行。但是，在移动一行后，我无法再移动该行或切换到的行。我仍然可以移动尚未移动/切换的行。

我需要调用一些函数来刷新table或个别DOM中的tr吗？我的假设是jQuery不再识别这些行。

关于jsFiddle的例子：

移动第一项，
现在看到第一项和第二项无法上移或下移，
看到第3项仍然可以上移。

Answer 1

这是因为你破坏了绑定click事件的元素。您可以使用.on：

轻松修复事件

将第一行更改为：

$(document).on("click", 'button.change-rank', function() {

工作演示：http://jsfiddle.net/SEQbd/2/

但这不是最好的方法。我会确保移动元素，而不是一直破坏/创建元素。您可以使用.html()

，而不是使用.html(someStrng)和.append( [jQuery Element/DOM Node] )

在此处查看演示：http://jsfiddle.net/SEQbd/4/

您可以编写简单的代码：http://jsfiddle.net/3Wkfm/

$('button.change-rank').click(function() {                                                               
    var direction = $(this).attr('data-direction'),
        $original = $(this).closest("tr"),
        $target = direction === "up" ? $original.prev() : $original.next();

    if ( $target.length && direction === "up" ) {
        $original.insertBefore($target);
    }
    else if( $target.length ) {
        $original.insertAfter($target);
    }
});

var a = condition ? c : d与写作相同：

if ( condition ) {
    var a = c;
}
else {
    var a = d;
}

Answer 2

原因应该是事件绑定丢失，当您通过.html（）重建表时，您需要做的只是将您的函数重新绑定到那些移动的按钮，或者只是不移动按钮，我的意思是只移动第一个td什么的。

向上/向下移动表格行，但不能再次移动

2 个答案: