选择由createElement JS创建的标签

Question

当我们在输入中按下按键时创建标签，我想选择该复选框并应用事件更改。那么如何选择由createElement创建的标签？

HTML

<div class="container">
        <div class="row">
            <div class="col-4">
                <div class="container-list">
                    <h1>To Do List</h1>
                    <input type="text" placeholder="Ajouter une tache">

                </div>
            </div>
        </div>

    </div>

JS

const list = document.querySelector('.container-list');
const input = document.querySelector('input');
// const icons = document.querySelectorAll('i');
const listIcons = document.querySelectorAll('.list input[type=checkbox]');

input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        const listAdded = document.createElement('div');
        listAdded.innerHTML = "<input type='checkbox'>" + '<span id="listContent">' + input.value + '</span>' + '<i class="fas fa-edit"></i>' + '<i class="fas fa-trash"></i>';
        listAdded.setAttribute('class', 'list');
        list.appendChild(listAdded);
    };
});

console.log(listIcons)

listIcons.forEach(listIcon => {
    listIcon.addEventListener('change', () => {
        alert('test')
    });
});

Answer 1

调用document.createElement时，对元素的引用将存储在变量本身中。如果要在其他函数中或在创建元素的函数范围之外使用该元素，只需将该变量声明为全局变量即可。

在您提供的代码中，listAdded变量正是您要寻找的。

Answer 2

这是因为您仅在文件顶部定义了listIcons，而在创建新元素后不再对其进行更新。因此，我的建议是在keydown事件监听器中为每个元素添加事件监听器之后。