無法在之后創建的 li 中定位復選框

Question

我正在嘗試在單擊時創建一個 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);

Answer 1

您可以使用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>