JS Bootstrap 表单在模式中提交两次

Question

我有一张桌子。在每一行中，我都有一个按钮，用于打开模式，并用与行相关的信息填充它，以便可以更新。

问题是，当我单击第一行的按钮时，它会打开模式。假设我犯了一个错误，所以我在模式中取消（单击“取消”或单击模式外部，等等），然后单击第二行的按钮。然后我在模式中点击“保存”按钮。然后表单提交两次，一次用于第一行，一次用于第二行。

这是一个工作代码片段：如果您打开 memb1 模式，然后取消，然后打开 memb2 并保存，它将提交给 memb 1 和 memb 2。

我错过了什么？ 谢谢

$(document).ready(() => {
  updateMember();
});

function updateMember() {
  const memberModal = document.getElementById('member-modal');
  if (memberModal) {
    memberModal.addEventListener('show.bs.modal', event => {
      const button = event.relatedTarget;
      const memberId = button.getAttribute('memberId');
      const paymentId = button.getAttribute('paymentId');
      console.log("update", memberId)
      patchMember(memberId, paymentId);
      console.log("update after", memberId)
    });
  }
}

function patchMember(memberId, paymentId) {
  console.log("patch", memberId)
  $('#form-member').submit((event) => {
    console.log("patch submit", memberId)
    event.preventDefault();
    })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  rel="stylesheet" />
<div class="modal fade" id="member-modal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="member-modal-title">Plop</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form id="form-member" name="form-member">
            <div class="modal-body">
              <h5 class="border-bottom mb-3">Truc</h5>
              <div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" value="" id="machin">
                <label class="form-check-label" for="machin">Machin</label>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-info">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
<button class="btn btn-outline-info btn-sm" memberId="1" paymentId="1}" type="button" data-bs-toggle="modal" data-bs-target="#member-modal">memb 1</button>
<button class="btn btn-outline-info btn-sm" memberId="2" paymentId="2" type="button" data-bs-toggle="modal" data-bs-target="#member-modal">memb 2</button>

Answer 1

之所以两次触发模态就是因为这个。 data-bs-target="#member-modal"。所以你创建了 2 个类似 target="#member-modal-2" 并尝试同样的场景。或者另一个原因可能是 button type="submit" class="btn btn-info">Save 提交时的此按钮只会触发这两个功能。但我很确定这是因为 #member-modal 所以尝试将名称更改为 #member-modal-2 尝试使用它并让我知道。

谢谢。