单击的addEventListener不起作用

Question

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不起作用。但是当我打印btnDelete(console.log(btnDelete);)时，它是正确的打印。但是事件侦听器不是workingDoes，有人知道代码有什么问题吗？

Answer 1

为什么不在HTML中使用onclick呢？

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