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

【问题标题】：jQuery - click event not being added to every elementjQuery - 单击事件未添加到每个元素
【发布时间】：2015-11-13 21:08:23
【问题描述】：

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

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

这是代码的sn-p：

$("#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。 ID 必须是唯一的。考虑改用一个类。
ID 必须是唯一的。当你解决这个问题时，使用事件委托来绑定删除图标的点击，不要使用.each()。

标签： javascript jquery onclick each

【解决方案1】：

正如我在评论中指出的，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 example

【讨论】：