javascript - 向上/向下移动表格行，但无法再次移动

Question

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

我有三行表格，每行都有一个向上和向下按钮。通过单击向下按钮，该行将与其下方的行切换。通过单击“向上”按钮，该行将与其上方的行切换。

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

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

jsFiddle 示例:

1. 向下移动第一项，
2. 请注意，现在项目一和项目二无法上下移动，
3. 发现第 3 项仍然可以向上移动。

Answer 1

这是因为您破坏了绑定(bind)单击事件的元素。您可以通过使用.on委托(delegate)事件来轻松修复它。 :

将第一行更改为:

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

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

---

但这不是最好的方法。我会确保四处移动元素，而不是一直破坏/创建元素。您可以使用 .append( [jQuery Element/DOM Node] ) <，而不是使用 .html() 和 .html(someStrng)/p>

在此处查看演示: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 = 条件？ c : d 与写作相同:

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