javascript - 无法定位之后创建的 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

您可以使用事件委托(delegate)来实现此目的。您的目标是已加载到文档中的元素(主要是父元素)。在您的情况下，动态创建的 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>