Получить текущую цель события в функции document.on

Question

В настоящее время я сталкиваюсь со следующей проблемой.На моем сайте пользователь имеет возможность удалить свою собственную запись.Когда кнопка удаления нажата, выполняется вызов Ajax.Новый контент доставляется, и контейнер заполняется новыми записями.Сначала я опорожняю контейнер, а затем заполняю его новым содержимым.Когда я очищаю контейнер, я теряю все события на всех кнопках, которые находятся в пределах одной записи.Чтобы решить эту проблему, я использую следующий код

$(document).on('click', '.DeleteButton', function (event: Event) { ... });

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

Буду признателен за любую помощь!

Answer 1

$('.DeleteButton').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.DeleteButton');

  this.delete(targetElement.data('id'));
});

Answer 2

Нашел решение.Как ни странно, this не работал.Прямо сейчас мой код выглядит следующим образом.

$(document).on("click", '.DeleteButton', DeleteButtonHandler.bind(this));

Я не помещал этот фрагмент кода в вопрос, который был глуп с моей стороны.Мне кажется, что this здесь не работает.Однако я нашел решение для этого.Вместо использования event.currentTarget я сейчас использую event.target.Это дает мне правильную кнопку с данными в ней.Я даже не знаю почему.Если у кого-то есть какое-либо объяснение этому, пожалуйста, объясните мне.

Answer 3

В обратном вызове этого обработчика событий this будет ссылаться на элемент .DeleteButton, по которому щелкнули.

$(document).on('click', '.DeleteButton', function (event: Event) {
    // Use `this` here, for instance `this.id` to get the ID of the `.DeleteButton`
});

Live Пример:

$(document).on('click', '.DeleteButton', function (event/*: Event*/) {
    console.log("Clicked:", this.id);
});

<div>
  <input type="button" id="btn1" class="DeleteButton" value="One">
  <input type="button" id="btn2" class="DeleteButton" value="Two">
  <input type="button" id="btn3" class="DeleteButton" value="Three">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>