Question

我正在构建一个函数，可以将表的行一次向上移动一行。没有制作向下按钮，因为我是第一次尝试构建它。尽管该函数确实会使行移动，但它通常会跳过某些行，向上移动两个点，通常直接移到表的顶部。添加的最后一行似乎总是按预期移动（一次1个）。 Up函数位于Fiddle的最底部。这与我创建每一行的方式有关吗？ JS字符串？

另外，鉴于up和down函数只会以一种方式移动一行，最好只为交换的两行切换innerHTML（虽然我认为我的上一行和下一行错误仍然存在）？

function Up() {
    var row = $(this).parent().parent(); //tr
    if ($(this).hasClass('up'))
         row.next().after(row);
    else
         row.prev().before(row);
}

我也很确定，它从来没有认识到它有hasClass（'up'）（无论是'up'还是btnUp'）。

Answer 1

在编辑和添加功能中，您需要在重新绑定之前取消绑定事件处理程序。

$(".btnEdit").unbind().bind("click", Edit); 
$(".btnDelete").unbind().bind("click", Delete); 
$(".btnUp").unbind().bind("click", Up);

如果不解绑它们，这些函数的多个实例将绑定到这些元素（因为$（“。btnUp”）选择器选择具有btnUp类的元素的每个实例。）

所以添加4项后。第一个将有4个up（）函数实例，第二个将有3个，第三个将有2个，最后一个将有1个（这就是为什么最后一个是唯一按预期工作的原因）。

编辑：

一种可能更好的方法是仅在需要时将函数绑定到一个元素。您可以通过编辑保存功能上的绑定来执行此操作，如：

par.find("td > .btnEdit").bind("click", Edit); 
par.find("td > .btnDelete").bind("click", Delete); 
par.find("td > .btnUp").bind("click", Up);

在编辑功能上，您只需要绑定保存按钮：

$(".btnSave").bind("click", Save);

Answer 2

实际上，有一个更好的解决方案，只需要你绑定一次，再减少你的代码大小。顺便说一句，jQuery从版本1.7开始提供.bind()的首选替代方法.on()。您应该委托事件，而不是将多个事件绑定到表中的所有按钮，从而将整个表的侦听器数量减少到仅4，并且无需重新绑定/解除绑定！

$("#tblData").on("click", ".btnEdit", Edit);     
$("#tblData").on("click", ".btnDelete", Delete); 
$("#tblData").on("click", ".btnUp", Up); 
$("#tblData").on("click", ".btnSave", Save);

上面的代码告诉Javascript：“内部#tblData，仅当目标（=点击的按钮）具有类<function>时才执行btnSomething。”在您的小提琴中，我还将event (e)作为参数传递，并将$(this)替换为$(e.target)。这是可选的，但很好的做法。

我还将你的功能简化为：

function Up(e) {
    var row = $(e.target).parent().parent(); //tr
    if (row.prev().length)
        row.prev().before(row);
}

结果：代码更少，性能更好，更清洁。 http://jsfiddle.net/46nozdqa/10/

在JS中交换行

2 个答案: