bootstrap 模态 ajax 提交时发送两次

Question

当我打开一个模式时，然后点击提交（例如发送 ajax post 请求），如果我关闭模式，再次打开它并重新提交发送 2 次请求（带有 e.preventDefault() 的事件）

我不明白哪里出了问题

    <div class="modal fade bd-example-modal-lg" id="modalA" tabindex="-1" role="dialog"
    aria-labelledby="modalChangeTypeLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body d-flex justify-content-center">
                <select name="nameA" id="idA" class="form-control" required>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="btnChangeStatusA" class="btn btn-primary">ChangeA</button>
            </div>
        </div>
    </div>
</div>



   <script>


    $(document).ready(function () {

        $("#btnA").click(function () {
            $("#modalA").modal();

            $("#btnChangeStatusA").click('input', function (f) {
                f.preventDefault()
                alert('ok')
            })

            
        })

    })
</script>

https://jsfiddle.net/e0tah93b/

Answer 1

当您点击 #btnA 时，它似乎在堆叠调用，尝试这样做：

$(document).ready(function () {

   $("#btnA").click(function () {
      $("#modalA").modal();
   })
   $("#btnChangeStatusA").click('input', function (f) {
      f.preventDefault()
      alert('ok')
   })
})

bootstrap 模态 ajax 提交时发送两次

bootstrap modal ajax send two time on submit

ajax

bootstrap-4

bootstrap-modal