Question

这里我使用两个listview控件List1和List2，并双击List1中的li项目正在移动到List2，但当我双击List2中的相同项目时，它不会移动到List1 这是我的代码

$("#list1 li").dblclick(function () {
$("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});

$("#list2 li").dblclick(function () {
$("#list2 li.clicked").removeClass("clicked").appendTo('#list1');
});

有什么建议吗？

Answer 1

您需要使用事件委派，在点击发布时将点击的元素与选择器进行比较（即最新的元素所在的列表）。

在jQuery 1.7之前，这是使用delegate()完成的，但从1.7开始，你应该使用on()。

当你直接绑定到元素时，这只会考虑处理程序绑定时元素的状态，而不是当前状态。

$("#list1").on('dblclick', 'li', function () {
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});

$("#list2").on('dblclick', 'li', function () {
    $("#list2 li.clicked").removeClass("clicked").appendTo('#list1');
});

此外，您确定不希望在事件处理程序中使用this，而不是#list1 li.clicked等。

Answer 2

未经测试，但我认为这是因为当你移动元素时，它会失去它的绑定。如果您在旧的jQuery中使用.on('event',fuynction(){ ... })（或.live），则应保留绑定。

$("#list1 li").on('dblclick',function () {
$("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});

$("#list2 li").on('dblclick',function () {
$("#list2 li.clicked").removeClass("clicked").appendTo('#list1');
});

Answer 3

您正在绑定列表项上的事件，这意味着您移动到第二个列表的项目仍然具有与第一个列表中相同的事件处理程序。双击已移动一次的项目会将其移动到已经存在的列表中，因此看起来没有任何结果。

使用delegate method将事件绑定到列表项的列表intead：

$("#list1").delegate("li", "dblclick", function () {
  $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});

$("#list2").delegate("li", "dblclick", function () {
  $("#list2 li.clicked").removeClass("clicked").appendTo('#list1');
});

或者，您可以让事件处理程序找出列表项所在的列表。这样，事件处理程序可以在列表项的任何位置工作，并且您可以对两个列表使用相同的事件处理程序：

$("#list1 li, #list2 li").dblclick(function () {
  var source = $(this).closest('ul');
  var target = source.attr('id') == "list1" ? $("#list2") : $("#list1");
  $("li.clicked", source).removeClass("clicked").appendTo(target);
});

Answer 4

问题是您将事件绑定到列表项本身。将它从容器中移开，你会失去它的效果。

here's an example使用.on()。这样，您将处理程序绑定到父级，并且任何子级（无论是现有的还是即将放置的）都将受到影响。我剥离了删除类，你可以把它添加回来

$(function() {

    //any "li", existing or soon to be, that is "double-clicked" in "list1", move to list2

    $("#list1").on('dblclick','li',function() {
        $(this).appendTo('#list2');
    });

    //any "li", existing or soon to be,  that is "double-clicked" in "list2", move to list1

    $("#list2").on('dblclick','li',function() {
        $(this).appendTo('#list1');
    });

});

Answer 5

$("#list1").on('dblclick', 'li', function () {
    $(this).remove().appendTo('#list2');
});

Answer 6

$("#list1 li").dblclick(function () {
            $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
            $("#list2 li.clicked").removeClass("clicked").appendTo('#list1');
            });

        $("#list4 li").dblclick(function () {
            $("#list2 li.clicked").removeClass("clicked").appendTo('#list1');
            $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
            });

如何通过双击将li项目从一个列表移动到另一个列表？

6 个答案: