获取document.on函数中事件的当前目标

Question

我目前面临以下问题。在我的网站上，用户可以删除自己的条目。按下删除按钮后，将进行Ajax调用。新内容将被传递，容器中会填充新条目。我先清空容器，然后用新的内容填充它。当我清空容器时，我会丢失一个条目中所有按钮上的所有事件。为了解决这个问题，我使用以下代码

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

现在我面临的问题是，当我访问事件的当前目标时，它会向我传递整个文档。我需要currenttarget首先知道按下了哪个按钮，然后获取按钮中的ID。

如果有任何帮助，我将不胜感激！

Answer 1

在事件处理程序回调中，this将引用单击的.DeleteButton元素。

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

实例：

$(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>

Answer 2

找到了一个解决方案。有趣的是，this没有起作用。现在，我的代码是这样的。

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

我没有把这个代码片段放在我认为很愚蠢的问题中。在我看来this在这里不起作用。然而，我找到了解决方案。我现在使用的不是event.currentTarget，而是event.target。这给我提供了正确的按钮及其数据。我甚至不知道为什么。如果有人对此有任何解释，请向我解释。

Answer 3

$('.DeleteButton').on('click', event => {
const clickedElement = $(event.target);
const targetElement = clickedElement.closest('.DeleteButton');
this.delete(targetElement.data('id'));
});