Tengo una ul con clase "artículos". Cada li tiene una clase de tarjeta de artículo. Tengo una variable llamada itemCards en mi archivo JS que contiene un NodeList con elementos li.item-card.

Puedo agregar dinámicamente un nuevo li con una clase de tarjeta de elemento debido a un detector de eventos. El problema es que después de agregar el nuevo li a la ul, mi variable no se modifica y no contiene el nuevo li. Al menos esto es lo que creo, porque tengo un detector de eventos 'clic' en cada tarjeta li.item, pero cuando hago clic en este nuevo elemento, no sucede nada, por lo que parece que el detector de eventos no está activo en este nuevo elemento añadido. ¿Cómo puedo "actualizar" la variable o activar el detector de eventos en el nuevo elemento agregado?

Aquí :

Haga clic en cualquier tarea : registre un mensaje

Presiona enter : agrega una nueva tarea

Resultado esperado : quiero registrar el mismo mensaje si hago clic en el nuevo li, pero no pasa nada

 const itemCards = document.querySelectorAll(".item-card"); itemCards.forEach( itemCard => { itemCard.addEventListener('click', (e) => { console.log("Task Clicked"); })}); document.addEventListener('keyup', (e) => { if(e.keyCode == 13) { // TODO: add new div task const newLi = document.createElement("li"); newLi.classList.add("item-card"); const label = document.createElement("label"); label.classList.add("task-label"); label.textContent = "New Task"; newLi.appendChild(label); console.log(newLi); e.target.value = ""; document.querySelector("ul.items").appendChild(newLi); } })

 <ul class="items"> <li class="item-card"> <i class="fa-regular fa-circle circle"></i> <label class="task-label">Task 1</label> <i class="fa-solid fa-xmark xmark"></i> </li> <li class="item-card"> <i class="fa-regular fa-circle-check circle check-circle"></i> <label class="task-label">Task 2</label> <i class="fa-solid fa-xmark xmark"></i> </li> </ul>