Question

快速概述：我有两个div，各自的无序列表。 jQuery应该允许点击的项目从一个div移动到下一个div。该功能似乎每个列表项只能使用一次。当我们移动后点击列表项时，他们不会恢复到原来的div位置。我已经查看了firebug中的html，并且在移动后它的格式正确，但jQuery不再能够操纵它们。救命啊！

jQuery

$('#one ul li').click(function () {
    var value = $(this).text();
    var id = $(this).attr('id');
    $('#two ul').append('<li id="'+ id +'">' + value + '</li>');
    $(this).remove();
});
$('#two ul li').click(function () {
    var value = $(this).text();
    var id = $(this).attr('id');
    $('#one ul').append('<li id="'+ id +'">' + value + '</li>');
    $(this).remove();
});

html是嵌入divs的两个列表

<div id="one">
   <ul>
      <li id="1">One</li>
      <li id="2">Two</li>
   </ul>
</div>

<div id="two">
   <ul>
      <li id="3">Three</li>
      <li id="4">Four</li>
   </ul>
</div>

Answer 1

而不是像现在一样直接点击项目：

$('#one ul li').click(function(){...})

当脚本仅加载到当时匹配的联系人时，这适用。由于您的LI稍后（动态）添加，因此不会绑定任何事件。您可以使用.on（）jQuery函数绑定到指定范围的父元素，该元素将应用于将来加载的任何元素：

$("#one").on("click", "ul li", function(){...})

区别在于事件与 #one 绑定，但适用于其中的任何 ul li （现在和将来）。

https://api.jquery.com/on/

Answer 2

remove()从DOM元素中删除元素，并删除其事件处理程序和与DOM元素关联的任何数据。您正在做的是删除单击的DOM元素（这也会删除在其上定义的事件处理程序），然后创建一个新元素（新创建的元素上没有定义事件处理程序）并将创建的元素附加到list元素。您应该只使用append()。当您append()元素已经是文档的一部分时，这些元素将被移动到新位置。

这是一个更好的解决方案：

$('#one ul li').click(function () {
  var elem = $(this);
  $('#two ul').append(elem); //move element to new location
});

$('#two ul li').click(function () {
  var elem = $(this);
  $('#one ul').append(elem);
});

在无序列表之间移动列表项（li）（ul）

2 个答案: