Question

我有一段jQuery代码，在单击提交按钮时将项添加到无序列表中。添加到列表中的部分是“X”按钮，用于从列表中删除项目。我正在使用each（）函数将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();
    });
  });
});

Answer 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

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

1 个答案: