event.currentTarget在点击时累积事件
event.currentTarget在点击时累积事件
提问于 2018-07-13 04:34:40
动态创建的内容具有删除选项。我通过以下方式捕获事件：
function requestDeleteItem() {
$(".list").on("click", ".fa-trash-alt", event => {
const itemId = $(event.currentTarget)
.parent()
.parent()
.attr("id");
const itemName = $(event.currentTarget)
.parent()
.siblings("span.name")
.text();
confirmDeleteItem(itemName, itemId);
});
}在confirmDeleteItem函数中，将生成一个确认按钮，并通过JQuery进行AJAX调用。
每个项目的删除选项都有一个图标。我可以点击多个项目的图标，然后点击最后一个项目的确认按钮，它会删除所有之前点击过的项目，而不仅仅是一个。我只想删除最后一次点击的项目。我认为它与当前的事件目标有关，并保存在内存中，但我还不够高级，无法做更多的工作。
回答 1
Stack Overflow用户
发布于 2018-07-13 05:02:10
您需要将$(".list").on事件移到requestDeleteItem之外。
实际情况是，每次调用requestDeleteItem() (以创建ajax按钮)时，都会为每个列表创建一个处理程序。因此，当单击按钮时，事件处理代码会被一次又一次地调用。相反，在使用事件委托时，您只需要添加一次的处理程序，因为它将选择以后添加的任何按钮。
下面是一个显示正确行为的简化代码片段。注意$("#container").on('click'是如何只被调用一次的。
let num = 0;
const requestDeleteItem = () => {
$("#container").append(`<button class="del">delete ${num}</button>`);
num++;
}
$("#add").on('click', () => {
requestDeleteItem();
});
$("#container").on('click', '.del', (e) => {
console.log(`clicked on ${e.currentTarget.innerHTML}`);
}).del {
display: block;
}
#container {
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=add>add button</button>
<div id="container"></div>
为了便于比较，下面是一个BAD示例，它每次都会添加事件处理程序：
let num = 0;
const requestDeleteItem = () => {
$("#container").append(`<button class="del">delete ${num}</button>`);
num++;
$("#container").on('click', '.del', (e) => {
console.log(`clicked on ${e.currentTarget.innerHTML}`);
})
}
$("#add").on('click', () => {
requestDeleteItem();
});.del {
display: block;
}
#container {
margin-top: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=add>add button</button>
<div id="container"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51314031
复制相关文章
相似问题
腾讯云开发者
