javascript - Click 事件不适用于动态生成的 span 元素的 id

Question

我正在开发“To Task”项目。

在这里，我动态添加了项目，也动态生成了项目。 但是当我想通过单击跨度元素来删除项目时。

此点击不起作用。

我搜索了有关此问题的每个解决方案，但没有一个满足我的要求。

  $("[id^=remove_]").click(function() {
    alert("working");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="task-list">
<li class="task" id="item_1"><span class="delete-todo" id="remove_1">X</span><span class="main-task">3232</span></li><li class="task" id="item_2"><span class="delete-todo" id="remove_2">X</span><span class="main-task">djkhjsh</span></li>
<li class="task" id="item_3"><span class="delete-todo" id="remove_3">X</span><span class="main-task">snsajdsakm</span></li><li class="task" id="item_4"><span class="delete-todo" id="remove_4">X</span><span class="main-task">sahgsabsa\</span></li>
<li class="task" id="item_5"><span class="delete-todo" id="remove_5">X</span><span class="main-task">sjghjdsn</span></li>
</ul>

我试过这个。 但它不起作用。 有人可以解释一下为什么它不起作用吗？

注意:我尝试了在 SO 上找到的几种解决方案。

Answer 1

按类别而不是 ID 选择删除按钮。并将代码更改为使用绑定(bind)到文档的 .on() 方法，以便可以选择所有元素，如下所示:

$(document).on('click', '.delete-todo', (function() {
    alert("working");
});