jQuery ajax模式在加载时提交表单

I have a modal in an external PHP file that is included in my Ajax. The problem is that when I click to load the modal, it already submits the form, which it shouldn't (only when I press submit on the modal itself).

I've tried: e.preventDefault();, return false; $("#editForm").unbind('submit');

Also noticed a problem in the jQuery: when I click to get the id, I get the correct ID of the button (so if I edit_3, edit_5, edit_7, it will correctly alert 3, 5, 7; but the ajax form only gets the FIRST button id I clicked. So if I click edit_3, alert 3, I get 3's details; but if I click edit_5 after, I get alert 5, I get 3's details now.)

jQuery/Ajax:

$(function() {
 $( ".edit" ).click(function(e){
    var type_id = $(this).attr( "name" );
    type_id = type_id.replace('edit_', '');     

    //e.preventDefault(); ajax also only sends ID of first edit I click, 
      // not the current one.
    $.ajax({
        type: "POST",
        url: "/type/edit.php",
        cache: false,
        data: {'type_id': type_id}
    }).done(function(html) {
        $('body').append(html);
        $('#modalEditType').modal('show');
    });

    //return false; 
 });
});

the link that triggers:

<a href="#modalEditType" class="edit" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>

And the PHP form/modal:

<form class="international" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="form-join">
   <div class="row col-lg-12">
    <div class="form-group">
    <label class="control-label col-lg-3">Type Name</label>
    <input type="text" id="title" name="title" placeholder="Type Name" class="form-control" value="<?php echo $type['title']; ?>" required />
 </div>
 <div class="col-sm-12">
   <button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
   <button class="btn btn-info" type="submit" name="cancel" value="Cancel Update" onclick="$('#modalEditType').modal('hide');">Cancel</button>
  </div>
    <input type="hidden" value="0" name="submitme"/>
   </form>

You can define onclick function in a tag and then call the function in that function that u made.

     <a href="#modalEditType" class="edit" onclick="sub_form()" name="edit_<?php echo $row['id'];?>"><button class="btn btn-default" type="button"><i class="fa fa-edit"></i></button></a>

function sub_form()
{
 var type_id = $(this).attr( "name" );
    type_id = type_id.replace('edit_', '');     

    //e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/type/edit.php",
        cache: false,
        data: {'type_id': type_id}
    }).done(function(html) {
        $('body').append(html);
        $('#modalEditType').modal('show');
    });
}

Well, you can natively prevent form submission, just like so,

$("form.international").submit(function(event){
    event.preventDefault();
});

That would prevent triggering anything that submits a form

I decided to rewrite the code (PHP) side. Aside now not sending the id's correctly (another question for another time), the code no longer submits upon loading. My best guess after rewriting were the two buttons:

  <button class="btn btn-danger" type="submit" name="submitted" value="" >Edit Type</button>
   <button class="btn btn-info" type="submit" name="cancel" value="Cancel Update" onclick="$('#modalEditType').modal('hide');">Cancel</button>

For whatever reason (if I find, I'll re-edit), even the cancel was not hiding the modal, but submitting the form. I converted it to a link:

   <a href="" class="btn btn-info" onclick="$('#modalEditType').modal('hide');">Cancel</a>

And it seemed to have helped. Accepting this answer and djay's as both were correct.