Javascript 使用.clone、.cloneNode和.append在GridView之间移动行

我有两个GridView，一个加载了数据，另一个没有。当我双击gvDisplayAvailItems中的项目时，我希望该行转到gvDisplaySelectedItems，反之亦然。网格也是多选的，带有一个按钮，允许移动所有选定的项目。gvDisplaySelectedItems的不同之处在于增加了一个输入列

按下按钮时调用AddDisplayParams（）

function AddDisplayParams() {
            var rows = $("#gvDisplayAvailItems").find('tr.selected');
            rows.each(function (index, element) {
                element.classList.remove("selected");
                var newRow = element.cloneNode(true);
                newRow.appendChild(customIdTb.cloneNode(true));
                $("#gvDisplaySelectedItems").append(newRow);

                element.remove();
            });
        }

双击时调用AddDisplayParam

        function AddDisplayParam(param) {
            var newRow = param.clone(true);
            newRow.append(customIdTb.cloneNode(true));
            $("#gvDisplaySelectedItems").append(newRow);

            param.remove();
        }

下面是我如何触发选择和双击的

$("#gvDisplaySelectedItems tr").click(function () {
                $(this).toggleClass("selected");
            });

            $("#gvDisplaySelectedItems tr").dblclick(function () {
                RemoveDisplayParam($(this));
            });

            $("#gvDisplayAvailItems tr").click(function () {
                $(this).toggleClass("selected");
            });

            $("#gvDisplayAvailItems tr").dblclick(function () {
                AddDisplayParam($(this));
            });

当我在gvDisplayAvailItems上双击并批量选择行时，这些行将正确地移动到gvDisplaySelectedItems。但是，对于通过AddDisplayParams添加的行，gvDisplaySelectedItems的函数不会触发任何内容。通过AddDisplayParam添加的文本框可以高亮显示，但双击时，只会将另一个文本框附加到gvDisplaySelectedItems中的行

---

因此，尽管.clone和.cloneNode的功能基本相同，但它们在这方面做的事情却大不相同。有人能解释一下为什么一个部分有效，而另一个不起作用吗？还有，为什么我的第二个网格函数不会在单击和双击时触发？

我建议尝试委托事件处理程序。 例如

而不是

$("#gvDisplaySelectedItems tr").click(function () {
    $(this).toggleClass("selected");
});

对于其他事件处理程序，依此类推

关于其他改进-移动元素不必

clone（）/append（）/remove（）

。只需对新的父元素执行

append（）

，就可以有效地移动它，因为元素每时每刻只能有一个父元素

---

示例：

但执行append（）将附带附加列。有没有一种方法可以在添加/删除最后一行的同时以这种方式使用append？另外，当只使用.append（）时，切换函数不会应用于添加的行。下面是一个示例，说明了我的意思（不知道您使用的是什么网格，所以这里只是简单的表）：关于

删除-在Add函数中，只需在

参数中找到最后一个
，然后执行
附加（）
。
$("#gvDisplaySelectedItems tr").click(function () {
    $(this).toggleClass("selected");
});