Tengo algunos problemas para agregar un detector de eventos de 'clic' a mis botones creados dinámicamente. El botón html original codificado no tiene problemas para agregar los elementos dinámicos varias veces, pero los botones dinámicos dentro de los nuevos elementos no reciben el detector de eventos. Cuando hago clic en ellos, no pasa nada.
Los botones creados dinámicamente parecen funcionar porque puedo cambiarlos para enviar botones y volver a cargar la página, pero aún no hay detector de eventos.
const title = document.querySelector(".tracker-title"); let btns = document.querySelectorAll(".add-btn"); btns.forEach(function (i) { i.addEventListener("click", function (e) { // e.preventDefault(); count += 1; const element = document.createElement("div"); element.classList.add("form-add-btn"); element.classList.add("form-layout"); const label = document.createElement("label"); label.setAttribute("for", `${count}`); label.innerText = "Title"; const input = document.createElement("input"); input.setAttribute("placeholder", `ex. ${exampleArray[count - 3]}`); input.setAttribute("id", `${count}`); input.setAttribute("type", "text"); const button = document.createElement("button"); button.classList.add("add-btn"); button.innerText = "Add"; button.setAttribute("type", "button"); title.appendChild(element); element.appendChild(label); element.appendChild(input); element.appendChild(button); btns = document.querySelectorAll(".add-btn"); }); });Este es el html que se genera cuando hago clic dos veces en el botón codificado.
<div class="tracker-title"> <div class="form-add-btn form-layout"> <label for="3">Goal Title</label> <input type="text" placeholder="ex. Meditation" id="3"> <button type="button" class="add-btn">ADD</button> </div> <div class="form-add-btn form-layout"> <label for="4">Title</label> <input placeholder="ex. Exercise" id="4" type="text"> <button class="add-btn" type="button">Add</button> </div> <div class="form-add-btn form-layout"> <label for="5">Title</label> <input placeholder="ex. Studying" id="5" type="text"> <button class="add-btn" type="button">Add</button> </div> </div>Los botones dinámicos no tienen ningún detector de eventos aplicado. El bucle agrega el detector de eventos a todos los botones de la lista en su momento de ejecución (una vez después de crear la matriz). Los botones creados dinámicamente no están en la matriz en este momento y no se aplicará el detector de eventos. Si desea el mismo detector de eventos para todos los botones, puede crear el detector de eventos como una función y analizarlo en la función addEventListener, que también debe llamarse después de crear un nuevo botón. Mi version:
const title = document.querySelector(".tracker-title"); let btns = document.querySelectorAll(".add-btn"); //Event listener function function eventlistener(e) { //e.preventDefault(); count += 1; const element = document.createElement("div"); element.classList.add("form-add-btn"); element.classList.add("form-layout"); const label = document.createElement("label"); label.setAttribute("for", `${count}`); label.innerText = "Title"; const input = document.createElement("input"); input.setAttribute("placeholder", `ex.`); input.setAttribute("id", `${count}`); input.setAttribute("type", "text"); const button = document.createElement("button"); button.classList.add("add-btn"); button.innerText = "Add"; button.setAttribute("type", "button"); //Add eventlistener function to the new button button.addEventListener("click", eventlistener); title.appendChild(element); element.appendChild(label); element.appendChild(input); element.appendChild(button); btns = document.querySelectorAll(".add-btn"); } btns.forEach(function (i) { //Add eventlistener function to exeisting buttons i.addEventListener("click", eventlistener); });