Как реализовать редактирование данных выбранного пользователя через форму редактирования на JS или JQuery?

Question

Прошу помощи. Лучше, если зададите направление.

Дана таблица пользователей с персональными данными типа: ФИО, дата рождения и т.д. У каждого пользователя есть две кнопки: удалить и редактировать.

При удалении я использую делегирование, чтобы отлавливать "Пользователя", которого решили удалить. Вылетает кастомная модалка, дабы подтвердить действие. И тут возникает проблема.

Суть проблемы: я навешиваю обработчик на кнопку "подтверждения" модалки внутри выполнения обработчика кнопки удаления. То есть:

Нажимаю удалить, вылазит модалка. Я просто её закрываю, типа передумал.
Нажимаю удалить на другом элементе и подтверждаю. Удаляются два элемента. Тот, что открывал прежде и текущий.

Так не следует делать и я это понимаю. Но не могу продумать, как тогда удалить элемент после нажатия кнопки подтвердить?

Ведь когда я обрабатываю клик по нажатию кнопки удалить, он находит нужный мне элемент, так как кнопка удалить является дочерним элементом столбца с пользователем.

А вот кнопка подтверждения таковой не является и я не могу получить элемент по event.target

_setEventListener() {
$('.user-table').on('click', '.button_delete', (event) => {
  // получаем елемент строки текущего юзера
  const element = event.target.closest('.user-table__row');
  // получаем ID юзера, присвоенный при создании в data-аргумент
  const currentUserID = element.getAttribute('data-userid');

   $(this.confirmBtn).on('click', () => {
    // удаляем юзера из БД по ID
    this.firebase.deleteUser(currentUserID);
    // удаляем из DOM
    element.remove(); // как раз тот элемент, который я нахожу во время обработки клика
    this.popupConfirmCloseMethod();
  })
});

}

Прошу прощения за, возможно, коряво составленный вопрос. Грамотно составлять вопросы оказалось целой наукой, которую я только начал постигать. И за то, что где-то использую Jquery, где-то нет. Только его постигаю впопыхах.

Answer 1

Вешайте на кнопку закрытия модалки функцию, делающую $(this.confirmBtn).off('click') , тогда будут сниматься лишние остающиеся обработчики.

Answer 2

Я решил данный момент простым присваиванием обработчика DOM елементу:

this.confirmBtn.onclick = () => {
    // удаляем юзера из БД по ID
    this.firebase.deleteUser(currentUserID);
    // удаляем из DOM
    element.remove(); 
    this.popupConfirmCloseMethod();
  }

Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя. Отсюда всё работает корректно.

БЛОГ НА HUSL

Как реализовать редактирование данных выбранного пользователя через форму редактирования на JS или JQuery?

Ответы (2 шт):