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事件侦听器。

Answer 2

之所以无法正常工作，是因为该类deletetask是由您的JS动态生成的。现有的事件侦听器未附加到动态创建的类，因此它永远不知道该类已被单击。您需要事件侦听器从DOM中该类之上的某个地方侦听。有几种不同的处理方法：

（如另一位用户所述）

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

上面的代码侦听整个JS document对象，这不是对资源的最有效利用，但可以完成工作。如果将类deletetask插入不同的位置，并且您希望单个事件侦听器能够处理click事件，则此方法很有用。

但是，更有效的方法是使用从一开始就已经在页面上显示的父ID tasksUL（或者一个类也可以工作）听众是这样的：

$('#tasksUL').on('click', '.deletetask', function() {
  $(this).parent().remove();
}

这部分代码将侦听ID tasksUL内发生在类deletetask上的任何click事件，并且仅侦听那些click事件，而不侦听on上的每个单击事件。 document。

JavaScript按钮不起作用

2 个答案: