Jquery 不会对 Jquery 创建的文本做出反应

Question

我想要做的是在按下按钮时将元素添加到列表中，然后再次按下按钮能够删除任何项目。这是我的意思的最小工作示例：

$('.delete-item').click(function() {

  $(this).parent().text("DELETED")

})

$('button').click(function() {

  $('ul').append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>

  <li>List item 1 <a class="delete-item" href="#">Delete item</a></li>

  <li>List item 2 <a class="delete-item" href="#">Delete item</a></li>

</ul>

<button type="button">Add item</button>

在这里，您可以将项目添加到无序列表并“删除”已经存在的项目，现在，您可以很好地删除预制项目，但是如果您尝试删除附加项目，无论出于何种原因，您都可以't。

这是如何固定的？谢谢！

Answer 1

$('.delete-item').click(...)仅将事件侦听器附加到现有项目。像这样使用事件委托：$("ul").on("click", ".delete-item", function() {     $(this).parent().text("DELETED") });使用事件委托，您可以将事件侦听器附加到 DOM 中已存在的祖先（此处为元素<ul>），并监视后代上的事件，无论它们是否已经存在或动态添加。演示：$("ul").on("click", ".delete-item", function() {  $(this).parent().text("DELETED")});$("button").click(function() {  $("ul").append(`<li>Appended item <a class="delete-item" href="#">Delete item</a></li>`)});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><ul>  <li>List item 1 <a class="delete-item" href="#">Delete item</a></li>  <li>List item 2 <a class="delete-item" href="#">Delete item</a></li></ul><button type="button">Add item</button>