Javascript jQuery：移动Li元素？

我正在编写以下jQuery脚本，单击左分区中的Li将其移动到右分区

$(document).ready(function(){

   $('.left ul li').click(function(){
      var toAdd = $(this).html();
      $('.right ul').append('<li>' + toAdd + '</li>');
   });

    $(document).on('click', '.left ul li', function(){
        $(this).remove();
    });

});

$（文档）.ready（函数（）{
$（'.left ul li'）。单击（函数（）{
var toAdd=$（this.html（）；
$（'.right ul'）。追加（'
'+toAdd+'
'）；
});
$（文档）.on（'click'，'left ul li'，function（）{
$（this.remove（）；
});
});

它工作得很好。但是，如果我尝试对左div中的Li元素执行相同的操作，那么在勾选它们之后，它们会移动到左div，这是行不通的

$(document).ready(function(){

   $('.left ul li').click(function(){
      var toAdd = $(this).html();
      $('.right ul').append('<li>' + toAdd + '</li>');
    });

    $(document).on('click', '.left ul li', function(){
        $(this).remove();
    });

  $('.right ul li').click(function(){
      var toAdd = $(this).html();
      $('.left ul').append('<li>' + toAdd + '</li>');
    });

  $(document).on('click', '.right ul li', function(){
        $(this).remove();
    });

});

$（文档）.ready（函数（）{
$（'.left ul li'）。单击（函数（）{
var toAdd=$（this.html（）；
$（'.right ul'）。追加（'
'+toAdd+'
'）；
});
$（文档）.on（'click'，'left ul li'，function（）{
$（this.remove（）；
});
$（'.right ul li'）。单击（函数（）{
var toAdd=$（this.html（）；
$（'.left ul'）。追加（'
'+toAdd+'
'）；
});
$（文档）.on（'单击'，'右键），函数（）{
$（this.remove（）；
});
});

我做错了什么

这是代码笔链接：

---

感谢您的帮助。

您无法将事件绑定到不存在的元素

$(document).ready(function(){   
    $(document).on('click', '.left ul li', function(){
        $(this).remove();
        var toAdd = $(this).html();
        $('.right ul').append('<li>' + toAdd + '</li>');
    });  

    $(document).on('click', '.right ul li', function(){
        $(this).remove();
        var toAdd = $(this).html();
        $('.left ul').append('<li>' + toAdd + '</li>');
    });  
});

$（文档）.ready（函数（）{
$（文档）.on（'click'，'left ul li'，function（）{
$（this.remove（）；
var toAdd=$（this.html（）；
$（'.right ul'）。追加（'
'+toAdd+'
'）；
});  
$（文档）.on（'单击'，'右键），函数（）{
$（this.remove（）；
var toAdd=$（this.html（）；
$（'.left ul'）。追加（'
'+toAdd+'
'）；
});  
});

您试图将单击事件绑定到此时不存在的元素–$（'.right ul li'）不选择任何元素，因为您的右ul中没有元素。