将删除按钮功能添加到具有相同类名的按钮,(JavaScript,jQuery)

bqf10yzr  于 2022-12-03  发布在  jQuery
关注(0)|答案(1)|浏览(122)

我正在开发一个小功能,遇到了一个关于删除按钮的问题,这些按钮是与card div沿着动态添加的,并且每个按钮都有相同的类名。
书面:

$(".delete-button").on('click', function(e){
    e.preventDefault();
    $(this).parent('div .card').remove();   
});
  • 此代码仅对第一个card div按钮运行。*

而且,点击其他卡的删除按钮是不工作的。
下面是一个JSFiddle链接,用于获得我的代码的清晰图像。
Dynamic Content

我希望在单击每张卡的“删除”按钮时,它应删除该特定卡。

如您所见,图像中有两张卡。因此,单击卡2的删除按钮,它应该删除卡2。

rt4zxlrg

rt4zxlrg1#

使用Fiddle时,请考虑以下情况:
https://jsfiddle.net/Twisty/cxtm7uzd/

JavaScript语言

$(".main-container").on("click", ".delete-button", function(e) {
    e.preventDefault();
    if (confirm("Are you sure you wish to delete this card?")) {
      $(this).closest(".card").remove();
      itemCounter--;
    }
  });

这会正确地委派事件。

委托事件处理程序的优点是它们可以处理来自以后添加到文档中的后代元素的事件。通过选择保证在附加委托事件处理程序时存在的元素,您可以使用委派的事件行程常式来避免频繁地附加和移除事件行程常式。这个项目可以是Model-View-控制器设计,例如,如果事件处理程序要监视文档中的所有反升事件,则为documentdocument元素在加载任何其他HTML之前在文档的head中可用,因此在那里附加事件是安全的,而无需等待文档准备就绪。

相关问题