const renderNote = data => { const postListRef = ref(db, 'Notes/' +data.key); console.log(data.key) const newPostRef = push(postListRef); var status = 'Pending' var title = 'new note' var date = '29-4-2022' var note = 'newly added note' let card = `<div id="single-card" class="col-lg-4 col-md-3" data-id=${data.key} ><!--outer layer of single card--> <div class="card card-body"><!--card body--> <p class="badge" id="status" style="background-color: rgb(0, 81, 81);">${status}</p> <span class="side-stick"></span> <!--side-stick color--> <!-- note title --> <h5 class="note-title text-truncate w-75 mb-0" >${title}<i class="point fa fa-circle ml-1 font-10"></i></h5><!--fa fa-circle is for the dot dot dot(continuity)--> <p class="note-date font-12 text-muted mt-0">${date}</p> <!--note description--> <div class="note-content"> <p class="note-inner-content text-muted" >${note}<i class="point fa fa-circle ml-1 font-10"></i></p> </div> <button class="btn btn-del">Delete${data.key}</button> <div id="actions" > </div> </div> </div>` prod.innerHTML += card; const btnDelete = document.querySelector(`[data-id='${data.key}'] .btn-del`); console.log(btnDelete); btnDelete.addEventListener("click",()=>{ console.log('deleting'); }); }EventListener no está funcionando. Pero cuando imprimo btnDelete(console.log(btnDelete);) se está imprimiendo correctamente. Pero el detector de eventos no funciona. ¿Alguien sabe qué está mal con el código?
¿Por qué no usas onclick en HTML?
<button onclick="console.log('deleting');" class="btn btn-del">Delete${data.key}</button>Incluso puede llamar a una función de eliminación como esa:
HTML:
<button onclick="deleteCard(${data.key})" class="btn btn-del">Delete${data.key}</button>JavaScript:
function deleteCard(key) { console.log(`Delete Card with key: ${key}`) }