上下移动表格行，但不能第二次移动

我在这里创建了一个jsFiddle：http://jsfiddle.net/markrummel/SEQbd/。上下移动表格行，但不能第二次移动

我有三个表行，每个行都有一个向上和向下按钮。通过点击向下按钮，行将在其下面的行切换。通过点击UP按钮，该行与其上方的行切换。

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

是否有某些功能需要拨打电话DOM中的table或个人tr s？我的假设是，jQuery不再识别这些行。

实例上的jsfiddle：

移动项目一下来，
看到现在项目一个和项目二不能向上或向下移动，
请参阅项目3仍然可以向上移动。

来源

2013-02-08 Mark Rummel

这是因为你销毁了你绑定click事件的元素。您可以轻松地通过使用deligating的.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; 
}

来源

2013-02-08 06:05:48 andlrc

感谢您的工作演示！我不太清楚在这种情况下如何使用'.append'，因为我不会简单地替换每个'.html（）'。我不想在不删除旧内容的情况下将TR内容附加到新的TR中。鸡和鸡蛋的情况。我是否简单地追加到持有'DIV'，然后准备好追加到新的'TR'？是否需要更多处理元素的销毁/创建，这就是为什么'.append'更好？有其他原因吗？ –

@MarkRummel我已经评论过你的观点，然后放在我自己的右边：看到它在这里工作：http://jsfiddle.net/SEQbd/4/。还记得接受答案，如果它提供了正确的信息 – andlrc

比你！我将在早上审查所有这些，我确信在我完成所有工作后都会接受。我仍然好奇为什么append更好。非常感谢您的帮助！ –

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

来源

2013-02-08 06:05:35

这是一个有趣的想法，不移动按钮，但我认为表行ID和数据属性改变它的事实可能仍然会感到困惑。我不确定。也许值得一试。我如何重新绑定按钮或重新绑定TR？ –

也许在td而不是tr上设置ID，或者甚至只是不移动任何东西，只是改变元素的ID值 –

上下移动表格行，但不能第二次移动

回答

相关问题