Bootstrap 5 模态没有按预期工作？

Question

我遇到了一个奇怪的问题，我不确定如何正确解决。我正在使用 Bootstap 5。让我举一个小例子：

const reportBtns = Array.from(document.querySelectorAll('.report'))

reportBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    const myModal = new bootstrap.Modal(document.getElementById('testModal'))
    myModal.show()

    const modalBtn = document.querySelector('.btn-submit')
    modalBtn.addEventListener('click', (e) => {
      console.log('clicked')
    })
  })
})

.report:hover {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>


<ul>
      <li class="report">
        <span>Report</span>
      </li>
      <li class="report">
        <span>Report</span>
      </li>
      <li class="report">
        <span>Report</span>
      </li>
    </ul>

    <div class="modal" tabindex="-1" id="testModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary btn-submit">Submit</button>
          </div>
        </div>
      </div>
    </div>

所以，当我第一次在控制台中单击 提交 时，我看到 clicked 记录了一次，但是，当我关闭模式时，再次打开它并单击 提交 第二次，我看到clicked 记录了三次而不是两次。下次它将是 6 clicked 等等。我有点理解由于某种原因保留了对旧模态的引用，当我在新模态上单击 Submit 时，以前的模态也会提交。

这对我来说没有任何意义为什么会发生。我尝试在模态关闭时使用modal.dispose()，但它不起作用，我什至不确定我是否正确使用它或它已用于此目的。

  reportBtns.forEach((btn) => {
  btn.addEventListener('click', async () => {
    const myModal = new bootstrap.Modal(document.getElementById('testModal'))
    myModal.show()

    const modalRef = document.querySelector('#testModal')
    modalRef.addEventListener('hidden.bs.modal', function () {
      const modal = bootstrap.Modal.getInstance(modalRef)
      if (modal) {
        modal.dispose()
      }
    })
    const modalBtn = document.querySelector('.btn-submit')
    modalBtn.addEventListener('click', (e) => {
      console.log('clicked')
    })
  })
})

感谢您的帮助。

Answer 1

每次单击“报告”按钮时，您都会添加一个事件侦听器，但在模式关闭后您忘记删除事件侦听器。事件侦听器的数量“堆积”起来，最终在单击提交按钮时会触发多个事件侦听器，导致它多次记录。

我建议使用querySelectorAll 和for 循环一次为所有按钮添加事件监听器。

const reportBtns = Array.from(document.querySelectorAll('.report'))

reportBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    const myModal = new bootstrap.Modal(document.getElementById('testModal'))
    myModal.show()
  })
})

const modalBtns = document.querySelectorAll('.btn-submit')
for (let i = 0; i < modalBtns.length; i++) {
  modalBtns[i].addEventListener('click', (e) => {
    console.log('clicked')
  })
}

.report:hover {
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />


<ul>
  <li class="report">
    <span>Report</span>
  </li>
  <li class="report">
    <span>Report</span>
  </li>
  <li class="report">
    <span>Report</span>
  </li>
</ul>

<div class="modal" tabindex="-1" id="testModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-submit">Submit</button>
      </div>
    </div>
  </div>
</div>