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

快速概述：我有两个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();
});

$（'#一个ul li'）。单击（函数（）{
var值=$（this.text（）；
var id=$（this.attr（'id'）；
$（'two ul'）。追加（'li-id=“'+id+'”>“+value+'”）；
$（this.remove（）；
});
$（'#两个ul li'）。单击（函数（）{
var值=$（this.text（）；
var id=$（this.attr（'id'）；
$（'1ul'）。追加（'li-id=“'+id+'”>“+value+'”）；
$（this.remove（）；
});

html是嵌入在div中的两个列表

<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>

一个
两个


三个
四个

---

不要像现在这样绑定，而是直接单击项目：

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

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

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

不同之处在于，事件必然是“一”，但适用于其中的任何ul li（现在和未来）

remove（）

从DOM元素中删除元素，并删除其事件处理程序和与DOM元素关联的任何数据。您要做的是删除单击的DOM元素（这也会删除在其上定义的事件处理程序），然后创建一个新的元素（新创建的元素上没有定义事件处理程序），并将创建的元素附加到列表元素。您应该只使用

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);
});

---

这确实会在两个ul之间移动元素，但在第二次单击时仍然不允许向后移动。这是真的。您必须使用事件委派@LP Papillon已经给出了答案。。。我懂了。这甚至更好。非常感谢你的解释！LP！这真是太棒了！！非常感谢您的及时回复和清晰的解释和参考。这让我高兴极了！