JavaScript 按钮不起作用

Question

我正在创建一个允许用户创建待办事项列表的 Chrome 扩展程序。用户能够添加和勾选任务。我添加了一个删除按钮，但是删除按钮不起作用。当我点击删除按钮时，没有任何反应。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        var li = $("<li><input type='checkbox' id='newtasklist' class='right-margin' <label>" + newTask + "</label> <button type='button' class='deletetask'>Delete</button> </li>");
        $('#tasksUL').append(li);
        $(this).val("");
      }
    }
  });
  $('body').on('click', ':checkbox', function(e) {
    $(this).parent().toggleClass('selected');
  });
  $('.deletetask').on("click", function() {
    $(this).parent().remove();
  });
});

.selected {
  text-decoration: line-through;
  font-size: 20px;
}

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
</ul>

Answer 1

您正在 JS 文件中动态创建按钮。将单击事件监听器添加到文档，然后过滤删除任务类。

试试这个:

$(document).on("click", ".deletetask", function() {
  $(this).parent().remove();
}

这应该会替换您当前的 .deletetask 事件监听器。