bootstrap modal ajax send two time on submit

Question

When I open a modal, then click the submit (to send ajax post request for instance) and if I close the modal, reopen it again and re-submit it send 2 times the request (event with e.preventDefault() )

I don't understand what is wrong

    <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

it seems to be stacking the calls when you click on #btnA, try doing this instead:

$(document).ready(function () {

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