使用jQuery调用外部函数

Question

I've got an external js file with the following code in it that is checking to see if a person login credentials are true or false. When I put this jquery into the actual php file it will work as intended but when it I put the jQuery into the js file and try calling it it doesn't work and I'm not getting any errors. What's wrong with the call?

js file:

function handleLogin(event) {

    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $( this ),
    username = $form.find( "input[name='username']" ).val(),
    password = $form.find( "input[name='password']" ).val(),
    url = "../process/login.php";

    // Send the data using post
    var posting = $.post( url, { username: username, password: password } );

    // Reset data in #testStatus textarea
    posting.done(function( data ) {
        if (data == '1') {
           $('#loginModal').modal('hide')
           $( "#loginOption" ).replaceWith( "<li id='loginOption'><a href='logout.php'>Logout</a></li>" );
        }
    });
}

php file (the call of the function located at the end of the php file):

        <!-- Modal -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="loginModalLabel">Login</h4>
          </div>
          <div class="modal-body">
            <form id="loginForm" action="">
              <div class="form-group">
                <label for="username">Username</label>
                <input name="username" type="text" class="form-control" id="username" placeholder="Username">
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="Password">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input type="submit" id="loginSubmit" name="login" class="btn btn-primary" value="Login">
          </div>
          </form>
        </div>
      </div>
    </div>

<script>
$("#loginForm").submit(function handleLogin() { });
</script>

Answer 1

You need to pass the function reference to the submit event handler...

Instead you are creating a new function which does not do anything to the submit handler, so try

$("#loginForm").submit(handleLogin);

Answer 2

It should be like this:

$("#loginForm").submit(function(e){
  handleLogin(e);
});