[英]Can't target checkbox inside of a li which is created after
我正在尝试在单击时创建一个 li 并将一个复选框附加到 li。 但是,即使我附加了复选框,我也无法定位它(更改它)。 如何定位最初不在页面上的 li 的复选框?
const li = document.createElement("li");
li.className = "collection-item";
li.appendChild(document.createTextNode(todoInput.value));
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.style.opacity = "1";
checkbox.className = "delete-item right";
checkbox.style.position = "relative";
li.appendChild(checkbox);
//todoList is ul which is created on page load
todoList.appendChild(li);
您可以使用event delegation
来实现这一点。 您将文档中已加载的元素主要定位为父元素。 在您的情况下,动态创建的li
的ul
然后测试某些条件以测试目标元素是否是您要查找的项目。
注意。 我尝试生成示例代码,因为您没有添加完整的代码片段。
const form = document.getElementById("todo-form"); const todoList = document.querySelector(".collection"); const clearBtn = document.querySelector(".clear-todos"); const filter = document.getElementById("filter"); const todoInput = document.getElementById("todo"); document.addEventListener("click", function(e){ if(e.target.classList.contains("delete-item")){ // Check this condition alert(e.target.value); } }) loadEventListeners(); function loadEventListeners() { //form listener form.addEventListener("submit", addTodo); //remove(x) to-do } function addTodo(e) { if (todoInput.value === "") { // errorDiv.appendChild(document.createTextNode("test")); } else { const li = document.createElement("li"); li.className = "collection-item"; // li.appendChild(document.createTextNode(todoInput.value)); const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.value = "checkbox"; checkbox.style.opacity = "1"; checkbox.className = "delete-item right"; checkbox.style.position = "relative"; li.appendChild(checkbox); todoList.appendChild(li); } e.preventDefault(); }
<div class="container"> <div class="row"> <div class="col s12"> <div id="main" class="card"> <div class="card-content"> <!-- <div id="error-div"--> <!-- class="center-align"><span id="error"></span>--> <!-- </div>--> <h1 class="card-title center-align">To Do List</h1> <div class="row"> <form id="todo-form"> <div class="input-field col s12"> <input type="text" name="todo" id="todo"> <label for="todo">New Todo</label> </div> <input type="submit" value="Add To-Do" class="waves-effect waves-light btn light-green darken-1"> </form> </div> </div> <div class="card-action"> <h5 id="todo-title" class="center-align">To Do's</h5> <div class="input-field col s12"> <input type="text" name="filter" id="filter"> <label for="filter">Filter To-do's</label> </div> <ul class="collection"></ul> <a href="" class="clear-todos btn red darken-4">Clear Tasks</a> </div> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.