Form Submission not working second time after submiting using Jquery and Ajax

Question

I have made a PHP page that submits data internally using AJAX and Jquery. It works fine, but after submit when I click on submit again(second time) it does not happen.. Here is the code for reference

$(function(){
    $('#sub').click(function(){
        $('#myForm').on('submit',function(e){
            e.preventDefault();
            $.ajax({
                url:"file.php",
                type:'POST',
                data:new FormData(this),
                contentType: false,
                processData:false,
                success:function(data){
                    $("#myResponse").replaceWith(data);}
                });
            });
        });
    });
});

This is the submit button inside from

<input type="submit" value="Submit" name="submit" id="sub" onclick="submitForm('file.php')" data-toggle="modal" data-target="#myModal">

Answer 1

Remove the (onclick="submitForm('file.php')") from the input type. And also remove "$('#sub').click(function(){});" . only keep it like:

  $('#myForm').on('submit',function(e){
   e.preventDefault();
   $.ajax({
   url:"file.php",
   type:'POST',
  data:new FormData(this),
  contentType: false,
  processData:false,
  success:function(data){
  $("#myResponse").replaceWith(data);}
    });
   });
  });