使用.clone， . clonenode和.append在gridview中移动行

Question

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

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在这里做了一些非常不同的事情，尽管基本上具有相同的功能。有人能解释一下为什么一个部分有效，而另一个却不行吗?而且，为什么我的第二个网格的功能不触发在单一和双击?

Answer 1

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

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

不是

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

等用于其他事件处理程序。

更多信息

关于其他改进-您不必使用clone()/append()/remove()来移动元素。对新的父元素执行append()将有效地移动它，因为一个元素每一刻只能有一个父元素。

例子:JSFiddle