Question

我正在处理通讯录应用程序。我一直在解决这个问题，无法弄清楚发生了什么。由于某些原因，重新呈现页面后，联系人单击事件不会再次触发。联系人的click事件处理程序在modal.js页面中创建。我遍历所有联系人并在其上创建事件处理程序。

// Show Modal
const cards = document.getElementsByClassName('card');

// Listen for click event on each card
for (let i = 0; i < cards.length; i += 1) {
  cards[i].addEventListener('click', function (e) {
    let modal = '';
    const contact = contacts[i];

    // Create template literal
    modal = `
      <div class="modal-container">
        <div class="modal">
          <button type="button" id="modal-close-btn" class="modal-close-btn"><strong>X</strong></button>
          <div class="modal-info-container">
             <img class="modal-img" src="${
      contact.image
      }" alt="profile picture">
              <h3 id="name" class="modal-name cap">${contact.name} ${
      contact.surname
      }</h3>
              <hr>
              <p class="modal-text"><a href="tel:${contact.phone}">${
      contact.phone
      }</a></p>
              <p class="modal-text">${contact.address}</p>
          </div>
        </div>
      </div>
      `;


// Create Overlay
createOverlay(modal);

// Close Modal
closeModal();

}）； }

例如，如果您单击某个联系人，则会打开该联系人的模式。但是，当您单击删除按钮，然后尝试打开另一个模式时，单击事件不会触发。搜索也一样。如果由于搜索导致页面重新呈现，则不再触发联系人上的click事件。我在控制台中没有收到错误消息。也许有人知道发生了什么事。

https://github.com/acandael/addressbook

重新呈现页面后，不会触发click事件

0 个答案: