Javascript jQuery-单击事件未添加到每个元素

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

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

下面是代码片段：

$("#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();
    });
  });
});

$（“#添加任务”）。单击（函数（）{
如果（$（“#toDoList”）.val（）.trim（）！=”）{
$（“ul.list-group”）.append（“
”+$（“#toDoList”）.val（）
+“
”；
$（“#toDoList”）.val（“”）；
};
$。每个（$（“#移除按钮”），函数（）{
$（此）。在（“单击”，函数（）上）{
$（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();
});

$（“#添加任务”）。单击（函数（）{
$（“ul”）。追加（“
任务X
”；
})
$（'ul'）。在（'click'，'removeButton'，函数（）{
$（this.parent（）.remove（）；
});

---

您似乎多次使用同一ID。ID必须是唯一的。考虑使用一个类。IDS必须是唯一的。当您修复此问题时，请使用事件委派绑定删除图标的单击，不要使用

.each（）

。