jQuery-click事件没有添加到每个元素中

jQuery - click event not being added to every element

本文关键字：元素 添加 事件 jQuery-click      更新时间：2023-09-26

我有一段jQuery代码，当单击提交按钮时，它会将项目添加到无序列表中。添加到列表中的部分内容是一个"X"按钮，用于从列表中删除项目。我使用each（）函数为添加到列表中的每个元素添加一个点击事件，但它只附加到第一个元素。

奇怪的是，如果该事件被触发，并且再次单击提交按钮，那么要添加到列表中的下一个元素将获得单击事件。

以下是代码片段：

$("#addTask").click(function() {
  if ($("#toDoList").val().trim() != "") {
    $("ul.list-group").append("<li class='list-group-item'>" + $("#toDoList").val()
        + "         <span class='glyphicon glyphicon-remove' id='removeButton'></span></li>");
    $("#toDoList").val("");
  };
  $.each($("#removeButton"), function() {
    $(this).on("click", function() {
      $(this).parent().remove();
    });
  });
});

正如我在评论中所指出的，ID必须是唯一的，因此您需要将removeButton从ID更改为类。然后，由于您是动态添加删除按钮的，因此需要使用.on（）的事件委派语法添加单击处理程序。这将通过以下方式实现：

$("#addTask").click(function () {
    $("ul").append("<li class='list-group-item'>task <span class='glyphicon glyphicon-remove removeButton'>X</span></li>");
})
$('ul').on('click', '.removeButton', function () {
    $(this).parent().remove();
});

jsFiddle示例

相关文章：