Question

我正在创建一个简单的待办事项列表应用程序。当我单击待办事项时，我想添加一行。我的代码在静态元素上工作，而不在动态生成的元素上工作。

我已经查找了stackoverflow，但是大多数关于jQuery实现的答案。我想用香草javascript

实现

var myForm = document.querySelector('.my-form');
var myList = document.querySelector('.my-list');

myForm.addEventListener('submit', addTodo);
myList.addEventListener('click', doneTodo);

for (let i = 0; i < myList.children.length; i++) {
  myList.children[i].addEventListener('click', doneTodo);
}

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

  var input = document.querySelector('#input').value;

  var li = document.createElement('li');

  li.className = 'my-item';
  li.appendChild(document.createTextNode(input));
  myList.appendChild(li);
  input.value = '';
}

function doneTodo(e) {
  if (e.target.classList.contains('my-item')) {
    console.log(this);
    this.style.textDecoration = 'line-through';
  }
}

<header>
  <div class="container">
    <h1>My To-Do List</h1>
  </div>
</header>
<section>
  <div class="container">
    <form class="my-form">
      <input id="input" type="text" placeholder="Enter a todo">
      <input id="submit" type="submit" value="Add to the list">
    </form>
    <ul class="my-list">
      <li class="my-item">Test li</li>
    </ul>
  </div>
</section>

我希望在动态生成的待办事项上添加一行。

click事件不适用于使用纯js

0 个答案: