bootstrap modal ajax send two time on submit-CodePudding

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  id="modalA" tabindex="-1" role="dialog"
    aria-labelledby="modalChangeTypeLabel" aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                <select name="nameA" id="idA"  required>
                </select>
            </div>
            <div >
                <button type="button"  data-dismiss="modal">Close</button>
                <button type="submit" id="btnChangeStatusA" >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/

CodePudding user response：

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')
   })
})