2

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>

1 respuesta 1

2

Cuando agregas elementos dinámicamente tienes dos opciones:

  1. Llamar la función como lo estás haciendo ahora, justo después de cargar los nuevos elementos
  2. Delegar el evento, asignándolo al documento y analizando dónde se hizo clic

Asignar el evento cuando se carga el DOM no funciona, porque se aplica solo a los elementos que ya existen y no es posible asignarlos a los que vas agregando.

En este ejemplo, inicias con un elemento y se van agregando más al hacer clic en el botón Cargar. El evento onclick está asignado al documento y ahí es donde se analiza dónde se disparó para ejecutar las instrucciones correspondientes al botón.

const data = [
  { "title":"1984", "description": "Una distopia..."},
  { "title":"La Máquina del tiempo", "description": "Clásico de ciencia ficción..."},
];

document.addEventListener('DOMContentLoaded', () =>{
    const tasksContainer = document.querySelector("#task-container");
    const cargar = document.querySelector('#cargar');
    cargar.addEventListener('click', function() {
        data.forEach(doc => {
            const {title, description} = doc;
            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>
          `;
        });
    });
    // Se asigna evento onclick al documento
    // El evento se recibe como parámetro (e)
    document.addEventListener('click', e => {
        // e.target es el elemento que disparó el evento
        // Si la clase corresponde al botón
        if(e.target.classList.contains('task-delete')) {
            // Obtener padre
            const parent = e.target.closest('.card');
            // Obtener título
            const title = parent.querySelector('h5');
            console.log(title.innerText);
            // Borrar tarjeta
            tasksContainer.removeChild(parent);
        }
    });
});
<div class="col-md-6" id="task-container">
          <div class="card card-body mt-2 border-primary">
                <h5>Volver al Futuro</h5>
                <p>Un elemento existente desde inicio</p>
                <div>
                    <button class="btn btn-info">Edit</button>
                    <button class="task-delete btn btn-danger">Delete</button>
                </div>
            </div>
</div>
<button id="cargar">Cargar datos</button>

2
  • Muchas gracias! No habia utilizado el DOMContentLoaded... que en mi caso lo encuentro mas incomodo trabajar con el por esta y otras cosas que me voy encontrando
    – RazerJs
    Commented el 11 ago. 2020 a las 10:10
  • En tu caso, no era problema del momento en que defines la función, sino que solo aplicaba a los elementos existentes y no a los agregados dinámicamente.
    – Triby
    Commented el 11 ago. 2020 a las 14:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.