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

我建议尝试委托事件处理程序。 E.g。

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

而不是

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

以及其他事件处理程序。

More info

关于其他改进 - 您不必clone()/append()/remove()移动元素。只需对新父进行append()就可以有效地移动它，因为一个元素每个时刻只能有一个父元素。

示例：JSFiddle

使用.clone，.cloneNode和.append将行移入和移出Gridviews

1 个答案: