Question

动态创建的内容具有删除选项。我通过

捕获了事件

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

每个项目的删除选项都有一个图标。我可以单击多个项目的图标，然后在最后一个项目上单击“确认”按钮，它将删除所有以前单击的项目，而不只是一个。我只想删除最后单击的项目。我认为这与当前事件目标有关，并且它已保存在内存中，但是我还不够先进。

Answer 1

您需要将$(".list").on的{{1}}事件移到之外。

正在发生的事情是，每次调用requestDeleteItem（）（以创建ajax按钮）时，您还将为每个列表创建一个处理程序。因此，单击按钮时，将一遍又一遍地调用事件处理代码。相反，在使用事件委派时，您只需添加处理程序一次，因为它将拾取以后添加的所有按钮。

这是显示正确行为的简化代码段。注意如何 requestDeleteItem仅被调用一次。

$("#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;
}

为进行比较，下面是一个 BAD 示例，该示例每次都会添加事件处理程序：

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

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;
}

event.currentTarget累积点击事件

1 个答案: