Javascript Can'；t在之后创建的li内的目标复选框

我正在尝试在单击时创建一个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);

---

您可以使用

事件委派

实现这一点。您的目标元素已加载到文档中，主要是父元素。在您的情况下，动态创建的

li

的

ul

，然后测试一些条件，以测试目标元素是否是您要查找的项目

注意。我尝试生成一个示例代码，因为您没有添加完整的代码段

const form=document.getElementById（“todo表单”）；
const todoList=document.querySelector（“.collection”）；
const clearBtn=document.querySelector（“.clear todos”）；
常量过滤器=document.getElementById（“过滤器”）；
const todoInput=document.getElementById（“todo”）；
文档.添加的列表器（“单击”，函数（e）{
如果（e.target.classList.contains（“delete item”）{//检查此条件
警报（如目标值）；
}
})
loadEventListeners（）；
函数loadEventListeners（）{
//窗体侦听器
表格。附录列表（“提交”，附录）；
//删除（x）待办事项
}
函数addTodo（e）{
if（todoInput.value==“”）{
//errorDiv.appendChild（document.createTextNode（“test”）；
}否则{
const li=document.createElement（“li”）；
li.className=“收款项目”；
//appendChild（document.createTextNode（todoInput.value））；
const checkbox=document.createElement（“输入”）；
checkbox.type=“checkbox”；
checkbox.value=“checkbox”；
checkbox.style.opacity=“1”；
checkbox.className=“删除项目权限”；
checkbox.style.position=“relative”；
li.appendChild（复选框）；
托多利斯特。阿佩奇尔德（李）；
}
e、 预防默认值（）；
}

待办事项清单
新待办事项
要做的事
过滤待办事项

您可以使用

事件委派来实现这一点。您的目标元素已加载到文档中，主要是父元素。在您的情况下，动态创建的
li
的
ul
，然后测试一些条件，以测试目标元素是否是您要查找的项目

注意。我尝试生成一个示例代码，因为您没有添加完整的代码段


const form=document.getElementById（“todo表单”）；
const todoList=document.querySelector（“.collection”）；
const clearBtn=document.querySelector（“.clear todos”）；
常量过滤器=document.getElementById（“过滤器”）；
const todoInput=document.getElementById（“todo”）；
文档.添加的列表器（“单击”，函数（e）{
如果（e.target.classList.contains（“delete item”）{//检查此条件
警报（如目标值）；
}
})
loadEventListeners（）；
函数loadEventListeners（）{
//窗体侦听器
表格。附录列表（“提交”，附录）；
//删除（x）待办事项
}
函数addTodo（e）{
if（todoInput.value==“”）{
//errorDiv.appendChild（document.createTextNode（“test”）；
}否则{
const li=document.createElement（“li”）；
li.className=“收款项目”；
//appendChild（document.createTextNode（todoInput.value））；
const checkbox=document.createElement（“输入”）；
checkbox.type=“checkbox”；
checkbox.value=“checkbox”；
checkbox.style.opacity=“1”；
checkbox.className=“删除项目权限”；
checkbox.style.position=“relative”；
li.appendChild（复选框）；
托多利斯特。阿佩奇尔德（李）；
}
e、 预防默认值（）；
}

待办事项清单
新待办事项
要做的事
过滤待办事项

这是否是您期望的？是的，我的代码是完全相同的，但li不是在页面加载时创建的，我