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>