javascript - 在某些情况下启动功能

Question

基本上我有两个不同的 div 和用户。一种用于已分配的用户，另一些则未分配。单击垃圾桶图标后，用户将被“取消分配”并因此被删除，但会添加到未分配的用户中。

在未分配的用户div中，您可以单击“添加”按钮将每个用户添加到分配的div中。

我已经成功地使用下面的代码做到了这一点。但是，一旦我取消分配用户，我现在就可以再次分配它。我认为这是因为新添加的元素无法与启动进程的按钮单击功能一起使用。

如果我在另一个函数中调用一个函数，则每次单击按钮时函数都会运行两次。

你能帮我写一下代码吗？

function assignUser() {
   $('.add-user-btn').click(function(){
   assign=$('#assign-users');
   $('<div class="assign-user"><div class="float-right delete-user-btn"><i class="fas fa-trash"></i></div><h1>Name</h1></div><button class="btn"><span>Transfer online</span> </button></div>').insertBefore('.assign-user:last');
   $(this).parent().remove();
});
}


function unassignUser() {
  $('.delete-user-btn').click(function(){
    assign=$('#assign-users-modal');
    assign.append('<div class="assign-modal"><h5>Name</h5></div><button class="btn add-user-btn">Assign</button></div>');
    var parent = $(this).parent();
    parent.remove();
  });
}

  unassignUser();
  assignUser();

<div id="assign-users">
  <div class="assign-user">
   <div class="float-right delete-user-btn"><i class="fas fa-trash"></i></div>
   <h5>Stephen Meritt</h5>
   <button class="btn btn-xs btn-block transfer"><span>Transfer online</span</button>
 </div>

<div id="assign-users-modal">
  <div class="assign-modal">
  <h5>Test</h5>
  <button class="btn add-user-btn">Assign</button>
</div>

Answer 1

发生这种情况是因为添加和删除这两种情况下的单击事件在加载 JavaScript 时都绑定(bind)在现有用户上。当您分配/取消分配用户时，您基本上是动态创建没有绑定(bind)事件的新元素。

可以通过以下方式绑定(bind)点击事件来修复:

$(document).on('click', 'button.add-user-btn', function () 
{ /* Code to move user to assign div */ }

$(document).on('click', 'div.delete-user-btn', function () 
{ /* Code to move user to un-assigned div */ }

请注意，以上仅在您加载 js 文件一次的情况下才有效。如果您多次加载 js 文件，则单击事件将绑定(bind)到添加和删除用户按钮的次数与您加载 js 的次数相同。