addEventListener для щелчка не работает

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');
});
}


Прослушиватель событий не работает. Но когда я печатаю btnDelete(console.log(btnDelete);), он печатается правильно. Но eventlistener не работает Кто-нибудь знает, что не так с кодом?

Решение проблемы

Почему вы не используете onclick в HTML?

<button onclick="console.log('deleting');" class="btn btn-del">Delete${data.key}</button>


Вы даже можете вызвать функцию удаления следующим образом:

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}`)
}