在某些情况下启动功能

Question

基本上，我的用户有两个不同的div。一种是分配给用户的，另一种是未分配的。单击废纸icon图标后，该用户“未分配”，因此被删除，但已添加到未分配的用户中。

在未分配的用户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时，添加和删除这两种情况下的click事件都绑定在现有用户上。分配/取消分配用户时，基本上是在动态创建没有绑定任何事件的新元素。

您可以使用以下方式绑定点击事件以对其进行修复：

$(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文件，则单击事件必定会与添加js一样多次添加和删除用户按钮。

Answer 2

您可以在页面呈现时将事件处理程序挂钩到任何现有元素，而元素不会消失。建议在元素周围放置一个包装器，并使用它尽可能接近元素的位置（避免文档和DOM遍历可能会很昂贵）。

作为替代方案，而不是经常通过添加/删除导致重排来访问DOM，您还可以在每个元素中放置一组元素，然后切换它们的可见性。

我已经放置了一些样式和元素，但是比完全匹配任何特定元素集更多的是显示操作和说明切换

// just to set some use cases
let usersToSetup = [{
    name: "Fred Franklin",
    id: "fredid1"
  },
  {
    name: "Emily Emmerson",
    id: "emmy345"
  }
];
// setup some test case users from the list
function setup(users) {
  let au = $('.assign-users');
  let tu = $('.transfer-users');

  for (let u = 0; u < users.length; u++) {
    let user = users[u];
    // assign
    let uaclone = au.find('.user-row').eq(0).clone();
    let uac = uaclone.find('.user-name');
    uac.data('nameid', user.id);
    uac.html(user.name);
    au.append(uaclone);
    // transfer
    let utclone = tu.find('.user-row').eq(0).clone();
    let utc = utclone.find('.user-name');
    utc.data('nameid', user.id);
    utc.html(user.name);
    tu.append(utclone);
  }
}
setup(usersToSetup);

// event manager for the clicks, this be multiple events for actions if desired
$('#hold-stuff').find('.users-container')
  .on('click', '.transfer-user-btn, .assign-user-btn', function(event) {
    let userRow = $(this).closest('.user-row');
    let isHidden = userRow.hasClass('hidden');
    let userId = userRow.find(".user-name").data('nameid');
    let isAdd = userRow.hasClass('assign-user');
    let isRemove = userRow.hasClass('transfer-user');

    let users = $(event.delegateTarget) // the other group
      .siblings('.users-container')
      .find('.user-row');
    // get match(s) for this user, this wa in case of duplicates
    let userMatch = users.filter(function() {
      return $(this).find(".user-name").data('nameid') == userId;
    });

    userRow.toggleClass("hidden", true);
    userMatch.toggleClass("hidden", false);
    //might want to disable clicks if these take long then enable after
    if (isAdd) {
      // do add stuff
    }
    if (isRemove) {
      // do remove stuff
    }
  });

body{font-family: "Font Awesome 5 Brands";}
.user-row.hidden {
  display: none;
}

.users-container {
  border: solid 1px #DDDDDD;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/5.11.2/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="hold-stuff" class="container-fluid">
  <div class="container-fluid transfer-users users-container">
    <div class="row header-text text-center">
      <div class="col">Transfers</div>
    </div>
    <div class="row user-row transfer-user hidden">
      <div class="col-sm">
        <h4 class="user-name" data-nameid="johnnytest">Johnny Test</h4>
      </div>
      <div class="col-sm">
        <button class="btn btn-outline-primary btn-xs transfer-user-btn" type="button"><span>Transfer online</span></button> 
        <span class="float-right transfer-user-btn"><i class="fas fa-redo"></i></span>
      </div>
    </div>
  </div>

  <div class="container-fluid assign-users users-container">
    <div class="row header-text text-center">
      <div class="col">Unassigned</div>
    </div>
    <div class="row user-row assign-user">
      <div class="col-sm">
        <h4 class="user-name" data-nameid="johnnytest">Johnny Test</h4>
      </div>
      <div class="col-sm">
        <button class="btn btn-outline-primary btn-sm assign-user-btn"><span>Assign</span></button>
        <span class="float-right assign-user-btn"><i class="fas fa-trash"></i></span>
      </div>
    </div>
  </div>
</div>