表单preventDefault然后再次激活不工作

I have a little form in my modal which looks like this:

    <form name="form" action="" method="post">
          <div class="modal-body">
              <input type="text" name="edited_id" value="" id="edited_id" class="hidden"/>
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="edited_name" class="form-control" id="edit_name" value="">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="edited_email" class="form-control" id="edit_email" value="">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input type="submit" name="edit_submit" class="btn btn-primary" value="Edit user"/>
          </div>
      </form>

and I want to prevent the form to submit if the user enters an email that it is already in my database. I have the following script:

$("#check_email").click(function() {
    var email = $(this).parent().siblings().find("#email").val();
    var that = $(this);
    $(this).parent().parent().submit(function( event ) {
        $.get("php/verify_email.php", {email: email}, function(data){
            if(data === "")
            {
                that.parent().parent().unbind('submit').submit();
            }
            else {
                alert(data);
                event.preventDefault();
            }
        });
    });
});

The problem is that if I put the even.preventDefault() in that else condition, the $.get() seems to not trigger, because I guess that the form submits faster. Otherwise if I put the event.preventDefault() right after the .submit(function( event ) { then I can't unbind the submit to work after the user changes the email.

What I am doing wrong?

P.S.

My php file looks like this:

<?php
include "connect.php";

if(isset($_GET['email']) && !empty($_GET['email'])){

    $sql = "SELECT * FROM users WHERE email='".$_GET['email']."';";

    $result = $conn->query($sql);

    if ($result->num_rows > 0){
        echo "The email is already in our database. Please try another one!";
    }
}

?>

I understand you would like to avoid form sending if email is already used.

At first, where is your magic button to do this :D ? I added button in example. You must be sure that your "this" is element you want, creating structure like .parent().parent().parent() everywhere is stupid - one change and everything not work.

Next thing to avoid form submit you must return false; inside submit function, preventDefault() work with <a> or other events like click

And next.. if you send ajax your callback function can back to your browser after your submit click. For example checkClick -> sendAjax -> submitClick -> ajaxBack

And next :D - PHP: Your form have method="post" but server use $_GET So.. if you send post you must use $_POST if get than $_GET

This time you used $.get so i dont know your ajax configuration but this can cause errors.

Here is some code but im sure this is not final implementation you want, but it should help :) sorry for english btw.

html:

<form name="form" action="" method="post">
      <div class="modal-body">
          <input type="text" name="edited_id" value="" id="edited_id" class="hidden"/>
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="edited_name" class="form-control" id="edit_name" value="">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="edited_email" class="form-control" id="edit_email" value=""> <button type="button" id="check_email" data-dismiss="modal">check</button>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <input type="submit" name="edit_submit" class="btn btn-primary" value="Edit user"/>
      </div>
  </form>

javascript:

$("#check_email").click(function() {
    var email = $(this).parent().find("#email").val();
    var that = $(this);
        alert(email);
    console.log($(this).parent().parent().parent())
    $(this).parent().parent().parent().submit(function( event ) {
        $.get("php/verify_email.php", {email: email}, function(data){
            if(data === "")
            {
                that.parent().parent().unbind('submit').submit();
            }
            else {
                alert(data);
                event.preventDefault();
            }
        });
        return false;
    });
});