Инициирующая функция в определенных ситуациях

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 часто с помощью add /удалить, вызывая перетекание, вы также можете просто поместить набор элементов в каждый из них, а затем переключить видимость их, как я здесь иллюстрирую.

Я поместил некоторые стили и элементы на место, но больше, чтобы показатьдействия и проиллюстрировать переключение, чем полное совпадение с любым конкретным набором элементов

// 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>