Javascript 在html中动态添加事件侦听器

我有两个HTML的ULs，一个用于用户，一个用于共享用户

<div class="container">

    <div id="userList" style=" ;width:45%;margin:10px;display:inline-block;vertical-align: top;">
       <span>Users</span>
       <ul class="usersUL">
         <li title="Add user"><a href="#">user1</a></li>
         <li title="Add user"><a href="#">user2</a></li>
       </ul>
   </div>

   <div id="sharedUsers"style="width:45%;margin:10px;display:inline-block;vertical-align: top;">
     <span>Shared Users</span>
     <ul class="usersUL" >

     </ul>
   </div>
 </div>

使用者




共享用户

我想在用户单击时将li in UL one添加到第二个列表中，反之亦然。我是这样做的

    //add to shared users from userslist
    $("#userList li").click(function(){

       $("#sharedUsers ul").append('<li title="Remove user">'+$(this).html()+'</li>');

    //add to users list from shared users
       $("#sharedUsers li").click(function(){
          $("#userList ul").append('<li title="Add user">'+$(this).html()+'</li>');
          $(this).remove();
          });
       $(this).remove();
       });

//从userslist添加到共享用户
$（“#用户列表li”）。单击（函数（）{
$（“#sharedUsers ul”）.append（“
”+$（this.html（）+”
”）；
//从共享用户添加到用户列表
$（“#sharedUsers li”）。单击（函数（）{
$（“#userList ul”）.append（“
”+$（this.html（）+”
”）；
$（this.remove（）；
});
$（this.remove（）；
});

我知道我做错了什么，我不会在列表项从第二个UL发送回第一个UL后添加新的事件侦听器。但我正在努力找到最好的方法

---

以下是js FIDLE:

如果您想将事件侦听器绑定到需要使用的动态创建的元素，如

$（“#userList”）。在（“单击”，“li”，function（）{…}）上

希望有帮助。
您不能在单击事件中嵌套单击事件。此外，还需要使用
on（）
将单击事件绑定到动态内容：


$（document）.on（'click'，'#userList li'，function（）{
$（“#sharedUsers ul”）.append（“
”+$（this.html（）+”
”）；
$（this.remove（）；
});
$（文档）.on（'click'，'#sharedUsers li'，function（）{
$（“#userList ul”）.append（“
”+$（this.html（）+”
”）；
$（this.remove（）；
});
只要不动态定义函数，使用“开”或“不”并不重要：

$('#userList li').click(relocLi);
$('#sharedUsers li').click(relocLi);

function relocLi() {
  if ($(this).attr('title') == "Add user") {
    $(this).attr('title', 'Remove user');
    $("#sharedUsers ul").append($(this));
  } else {
    $(this).attr('title', 'Add user');
    $("#userList ul").append($(this));
  }
}

可能重复的
$('#userList li').click(relocLi);
$('#sharedUsers li').click(relocLi);

function relocLi() {
  if ($(this).attr('title') == "Add user") {
    $(this).attr('title', 'Remove user');
    $("#sharedUsers ul").append($(this));
  } else {
    $(this).attr('title', 'Add user');
    $("#userList ul").append($(this));
  }
}