Question

我已经建立了一个相当简单的应用程序，该应用程序具有任务输入，并将输入的任务添加到任务列表中。

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flatiron Task Lister</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="main-content">
    <h1>Task Lister Lite™️</h1>

    <form id="create-task-form" action="#" method="post">
      <label for="new-task-description">Task description:</label>
      <input type="text" id="new-task-description" name="new-task-description" placeholder="description">
      <input type="submit" value="Create New Task" id="submit">
    </form>

    <div id="list">
      <h2>My Todos</h2>
      <ul id="tasks">
      </ul>
    </div>

    <script src="./src/index.js"></script>
  </div>

</body>
</html>

index.js


document.addEventListener("DOMContentLoaded", () => {
  const task = document.getElementById("new-task-description")
  const submit = document.getElementById("submit");
  const list = document.getElementById("list");

  submit.addEventListener("click", function(event) {
    event.preventDefault();
    let todo = task.value;
    list.innerHTML += `<div id="list-${todo}"><li>${todo}<button>X</button></div>`;
  });
});

如您所见，我对其进行了设置，以使每个任务在div标签中都具有唯一的ID，并且在有人希望删除任务的情况下还具有x按钮。我无法弄清楚如何向X按钮添加事件侦听器，因为运行脚本时该事件侦听器不存在。任何关于如何执行此操作的想法，或者可能更简单的实现此方法的想法，将不胜感激。

Answer 1

这里有一个简单的方法，可以用来创建动态元素并将EventHandler添加到其中：

const

const newElement=document.createElement("span");
newElement.innerHTML="Hello World, I am clickable!";
newElement.classList.add("sp");
newElement.addEventListener("click", ()=>{
  prompt("Am I cute?");
});

document.body.appendChild(newElement);

.sp{
  position: relative;
  background-color: #eee;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

如何将事件侦听器添加到JS尚未添加到DOM的html元素？

1 个答案: