Estoy haciendo un CRUD con javascript y firebase y me encontre con el siguiente problema....
La funcion:
onGetTasks(callback)
trae la informacion de la collection tasks de firebase y la muestra en la pagina y ademas añade a la lista de tareas una nueva tarea en cuanto es insertada .
Mi problema esta en que si saco mi funcion
makeListenerBtnDelete()
de dentro de la funcion onGetTasks() (donde donde la funcion se ejecuta multiples veces) no tengo el resultado esperado... ya sea al final del on 'DOMContentLoaded' que fuera en mi archivo js ejecutándola por separado... pero si hago un document.querySelectorAll('.task-delete') desde el navegador si selecciona todos los nodos. Este es el codigo. Me gustaria saber porque sucede esto. Saludos
const onGetTasks = (callback) => db.collection('tasks').onSnapshot(callback)
const makeListenerBtnDelete = () =>{
//selecciono los botones
const btnDelete = document.querySelectorAll(".task-delete");
//annado los event listeners
btnDelete.forEach((btn) => {
btn.addEventListener("click", () => {
console.log("click");
});
});
}
window.addEventListener('DOMContentLoaded', async () =>{
const tasksContainer = document.getElementById("task-container");
await onGetTasks((querySnapshot) =>{
tasksContainer.innerHTML += ``
querySnapshot.forEach((doc) => {
const { title, description } = doc.data();
tasksContainer.innerHTML += `
<div class="card card-body mt-2 border-primary">
<h5>${title}</h5>
<p>${description}</p>
<div>
<button class="btn btn-info">Edit</button>
<button class="task-delete btn btn-danger">Delete</button>
</div>
</div>
`;
});
makeListenerBtnDelete()
})
})
<div class="col-md-6" id="task-container">
<!- Aqui irian las card ejemplo -->
<div class="card card-body mt-2 border-primary">
<h5>1984</h5>
<p>Una distopia</p>
<div>
<button class="btn btn-info">Edit</button>
<button class="task-delete btn btn-danger">Delete</button>
</div>
</div>
<div class="card card-body mt-2 border-primary">
<h5>La maquina del tiempo</h5>
<p>clasico de ciencia ficcion, el hombre...</p>
<div>
<button class="btn btn-info">Edit</button>
<button class="task-delete btn btn-danger">Delete</button>
</div>
</div>
</div>