Не удается настроить флажок внутри библиотеки, созданной после

Question

Я пытаюсь создать 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. Вы нацелены на элемент, который уже загружен в ваш документ, в основном на родительский элемент. в вашем случае ul из li, который создается динамически, затем протестируйте некоторое условие, чтобы проверить, является ли целевой элемент элементом, который вы ищете.

Примечание. Я пытаюсь создать пример кода, потому что вы не добавили свой полный фрагмент кода.

    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>