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 记录了三次而不是两次。下次就是6clicked等等。我有点理解，出于某种原因保留了对旧模态的引用，当我在新模态上单击 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

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

我建议使用 querySelectorAll 和 for 循环 once.

向所有按钮添加事件侦听器

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>

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

Bootstap 5 modal is not working as expected?

html

javascript

bootstrap-modal

bootstrap-4