Javascript event.currentTarget在单击时累积事件

动态创建的内容具有删除选项。我通过视频捕捉事件

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调用

每个项目的删除选项都有一个图标。我可以单击多个项目的图标，然后单击最后一个项目上的确认按钮，它将删除所有以前单击的项目，而不仅仅是一个。

---

我只想删除上次单击的项目。我认为这与当前事件目标有关，它会被保存在内存中，但我还没有足够的能力来完成更多的任务

您需要将

$（“.list”）。在

事件上移动到

请求删除项

之外

每次调用requestDeleteItem（）（创建ajax按钮）时，您也在为每个列表创建一个处理程序。因此，当单击按钮时，事件处理代码会被反复调用。相反，在使用事件委派时，只需添加一次处理程序，因为它将拾取以后添加的任何按钮

下面是一个显示正确行为的简化代码段。注意如何

$（“#容器”）。on（'click'

只调用一次

设num=0；
const requestDeleteItem=（）=>{
$（“#容器”）.append（`delete${num}`）；
num++；
}
$（“#添加”）。在（'单击'，（）=>{
requestDeleteItem（）；
});
$（“#容器”）。在（'click'、'.del'、（e）=>{
log（`clicked on${e.currentTarget.innerHTML}`）；
})

.del{
显示：块；
}
#容器{
边缘顶部：10px；
}

添加按钮

我看不到event.currentTarget在您的代码中的任何位置被使用。@connexo故意为了观看的乐趣。添加回

currentTarget

中的是

.list

，而不是

.fa trash alt

。您可能打算使用

event.target

。此外，您还可以将

itemId

简化为

$（event.target）.latest（'[id]'）.attr（'id'）

@PatrickRoberts将$（event.currentTarget）更改为$（event.target）并不能解决此问题

itemId

是一个隐式全局变量，因为您没有使用

var

、

let

或

const

声明它。请尝试添加它。