jQuery

Question

我有一段 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();
    });
  });
});

Answer 1

正如我在评论中指出的那样，ID 必须是唯一的，因此您需要将 removeButton 从 ID 更改为 class。然后，由于您要动态添加删除按钮，因此需要使用 .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

jQuery - 没有将点击事件添加到每个元素

jQuery - click event not being added to every element

javascript

each

onclick