如何使按钮的图标起作用？

Question

当用户单击按钮时，我一直在尝试删除或检查按钮。它确实有效，但是当我单击按钮的图标时，如果用户单击复选标记，它不会删除列表或检查它。 所以我有这样的事情：

<button> //here I actually have code if user clicks on it (check or delete mark button) it deletes or check it as task completed
     <span>
         <i></i> // here I have icons of delete and check mark
     </span>
 </button>

这是在 JavaScript 代码中创建的（如下所示） 我如何将相同的图标应用于稍后创建的图标，而不是已经在我的 html 中。如果你检查我的代码是：

icontainerforremove.className = "fas fa-trash-alt"; icontainer.className = "fas fa-check-circle";

它们是上述两个，如果用户单击按钮而不是按钮的图标，我不确定如何使其工作（它适用于按钮单击，但我在按钮内有小图标作为检查和 bin - 所以删除当用户点击这些图标时它不起作用） 我不知道如何在那里添加这些功能，因为它稍后会在 javascript 中创建。如果需要更多解释，请告诉我。任何帮助表示赞赏。

我的代码：

const todoInput = document.querySelector(".form-control");
const todoButton = document.querySelector(".add");
const todoList = document.querySelector(".todo-list");

document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);

function addTodo(event) {
  event.preventDefault();

  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo-item");

  const newTodo = document.createElement("h6");
  newTodo.innerText = todoInput.value;
  newTodo.classList.add("list-item-text");

  todoDiv.appendChild(newTodo);
  saveLocalTodos(todoInput.value);

  const removeButton = document.createElement("button");

  removeButton.classList =
    "remove btn btn-primary font-weight-bold float-right mt--20";
  changeColorRemove(removeButton);

  const spancontainerforremove = document.createElement("span");
  const icontainerforremove = document.createElement("i");

  icontainerforremove.className = "fas fa-trash-alt";


  spancontainerforremove.appendChild(icontainerforremove);
  removeButton.appendChild(spancontainerforremove);

  todoDiv.appendChild(removeButton);

  const completedButton = document.createElement("button");

  changeColor(completedButton);

  completedButton.classList =
    "complete btn btn-primary font-weight-bold float-right mr-1 mt--20";

  const spancontainer = document.createElement("span");
  const icontainer = document.createElement("i");

  icontainer.className = "fas fa-check-circle";

  spancontainer.appendChild(icontainer);
  completedButton.appendChild(spancontainer);

  todoDiv.appendChild(completedButton);

  todoList.appendChild(todoDiv);
  todoInput.value = "";
}

function deleteCheck(e) {
  const tgt = e.target;
  if (tgt.classList.contains("remove") || tgt.classList[0] ==="fas") {
    removeLocalTodos(tgt);
    tgt.closest("div").remove();
  } else if (tgt.classList[0] === "complete") {
    const todo = tgt.parentElement;
    todo.classList.toggle("completed");
    console.log(todo);
    tgt.closest("div").style.setProperty("text-decoration", "line-through");
    tgt.closest("div").style.setProperty("opacity", "0.2");
  }
}
function changeColor(completedButton) {
  completedButton.style.setProperty("background-color", "#41e141");
  completedButton.style.setProperty("border", " 1px solid #41e141");
}

function changeColorRemove(removeButton) {
  removeButton.style.setProperty("background-color", "#FF0000");
  removeButton.style.setProperty("border", " 1px solid #FF0000");
}

function saveLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }

  todos.push(todo);
  localStorage.setItem("todos", JSON.stringify(todos));
}

function getTodos() {
  let todos;

  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  todos.forEach(function (todo) {
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo-item");

    const newTodo = document.createElement("h6");
    newTodo.innerText = todo;
    newTodo.classList.add("list-item-text");

    todoDiv.appendChild(newTodo);

    const removeButton = document.createElement("button");

    removeButton.classList =
      "remove btn btn-primary font-weight-bold float-right mt--20";
    changeColorRemove(removeButton);

    const spancontainerforremove = document.createElement("span");
    const icontainerforremove = document.createElement("i");

    icontainerforremove.className = "fas fa-trash-alt";

    spancontainerforremove.appendChild(icontainerforremove);
    removeButton.appendChild(spancontainerforremove);

    todoDiv.appendChild(removeButton);

    const completedButton = document.createElement("button");

    changeColor(completedButton);

    completedButton.classList =
      "complete btn btn-primary font-weight-bold float-right mr-1 mt--20";

    const spancontainer = document.createElement("span");
    const icontainer = document.createElement("i");

    icontainer.className = "fas fa-check-circle";

    spancontainer.appendChild(icontainer);
    completedButton.appendChild(spancontainer);

    todoDiv.appendChild(completedButton);

    todoList.appendChild(todoDiv);
  });
}

function removeLocalTodos(todo) {
  let todos;
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  const todoIndex = todo.children[0].innerText;
  todos.splice(todos.indexOf(todoIndex), 1);
  localStorage.setItem("todos", JSON.stringify(todos));
}

Answer 1

您遇到的问题与您使用事件绑定的方式有关。加载页面时，您正在绑定 eventHandler。虽然通过脚本添加的项目没有绑定到 eventHandler。

您可以通过将事件处理程序绑定到新添加的项目来解决此问题。 或者使用委托事件处理程序，它也将绑定到新添加的元素。

将您的代码更改为：

function addTodo(event) {
    /* other code omitted for brevity */

    todoButton.addEventListener("click", addTodo);
    removeButton.addEventListener("click", deleteCheck);
}

---

更新

在更好地理解你的问题之后，也许你可以尝试使用这个 css 规则： pointer-events: none;

这将使您放置此规则的元素单击通过。所以你可以用这个来设计你的i 标签。您的点击事件应该会传递到您的按钮。

所以：

<button> <-- let's say this has a click event
    My button <i class="fa fa-plus-sign"></i> <-- this has the css style pointer-events: none;
</button>

点击 i 标签（在本例中为图标），将使点击穿过图标并到达按钮上。如果我对您的理解正确，这应该可以。