某些情况下的启动功能

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

您可以通过以下方式绑定点击事件来修复：

$(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 文件，click 事件将绑定到你加载 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>