jQuery函数不执行

Question

我正在尝试使用 Ajax 和 PHP 后端制作登录表单。但是，当我单击提交按钮时，除了模式框关闭之外什么都没有发生。我做了一些测试，看起来 $("#login").click(function(){ 甚至没有被调用。下面是我的代码。为什么会这样？

这是我的 JS 代码：

$(document).ready(function(){
    // Open login modal when login button is clicked
    $("#login_btn").click(function(){
        $('#login_modal').modal();
    });

    // Submit the login information when the sign in button is clicked
    $("#login").click(function(){ 
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;

        $.ajax({ 
            type: "POST",
            url: "../php/authentication.php",
            data: login_info, 
            success: function(msg){ 
                var msg=trim(msg);  
                // Redirect user if authentication is successful  
                if(msg == 'OK') { 
                    window.location = '../../action-log.php';
                 } 
                 // Print error message
                 else { 
                     $('#login_response').html(msg);
                 }     
            }     
        });
    }); 
});

这是表单的代码：

<link type="text/css" rel="stylesheet" media="screen" href="assets/css/css_action-log-login.css">
<script type="text/javascript" charset="utf-8" src="./assets/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./assets/js/jquery.simplemodal.js"></script>
<script type="text/javascript" charset="utf-8" src="./assets/js/js_action-log-login.js"></script>
<div id="login_modal" style="display: none;">
<div class="heading">Sign In</div>
<div id="login_response"></div>
<form id="login_form" method="post">
<table align="center" style="margin-top: 25px;" border="0">
<tr><td>
<label>Username: </label><br/><br/>
<label>Password: </label>
</td><td>
<input type="text" name="user" id="user" /><br/><br/>
<input type="password" id="password" name="password" />
</td></tr>
<tr><td></td><td align="left">
<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
</td></tr>
</table>
</form>
</div>

这里是 authentication.php：

<?php
// Requires
require('./config.inc.php');
require('./functions.inc.php');

// Session
session_start();

// Error messages
$errormsg=array();

// Check if the username field is empty
if(isset($_POST['user']) && !empty($_POST['user'])){
    $user=mysql_real_escape_string($_POST['user']);
} else {
    $errormsg[]='username';
}

// Check if the password field is empty
if(isset($_POST['password']) && !empty($_POST['password'])){
    $password=mysql_real_escape_string($_POST['password']);
} else {
    $errormsg[]='password';
}

// Print error message
if(count($errormsg) > 0) {
    echo 'Please enter your ';
    for($i=0; $i < count($errormsg); $i++){
         echo $errormsg[$i];
         if($i < count($errormsg)-2) echo ', ';
         if($i == count($errormsg)-2) echo ' and ';
     }
} 
// Verify authentication details
else {
    $db = new mysql();
    $salt = "*65'][as'``'fg4";
    $querySQL = ('
        SELECT COUNT(*)

        FROM al_users

        WHERE username = "'.$user.'"

        AND password = PASSWORD("'.$password.$salt.'")
    ');
    $result = mysql_query($querySQL); 
    if(!$result) die(mysql_error()); 
    $row = mysql_fetch_row($result); 
    if($row[0] == 0) {
        echo 'Invalid email or password.';
    } else {
        $_SESSION['name'] = $user;
        echo 'OK';
    }   
}
?>

Answer 1

试试这个

 $(document).on('click','#login',function (){
   //Do magic here
});

Answer 2

尝试添加事件作为参数，并在开头调用 prevent default。

$("#login").click(function(event){ 
event.preventDefault();

等等……

Answer 3

您没有取消按钮单击，因此表单正在提交。用preventDefault()取消默认操作

$("#login").click(function(e){
    e.preventDefault()
    ...

Answer 4

你需要阻止提交按钮的默认功能。

Here is the jsFiddle

// Submit the login information when the sign in button is clicked
    $("#login").click(function(event){ 
        event.preventDefault();
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;
        // rest of your code

希望对你有用:)

Answer 5

首先，我建议在 Chrome 中检查 Firebug (Firefox) 或开发者工具，看看是否有任何 JavaScript 错误，或者是否有任何 JS 文件 (jQuery) 未加载...

然后，如果所有内容都正确加载，请尝试使用<form> 的提交操作，如下所示：

$("#login_form").submit(function()
{
     var user=$("#user").val();
     var password=$("#password").val();
     var login_info="user="+user+"&password="+password;

     $.ajax({ 
             type: "POST",
             url: "../php/authentication.php",
             data: login_info, 
             success: function(msg){ 
             var msg=trim(msg);  
             // Redirect user if authentication is successful  
             if(msg == 'OK') { 
                window.location = '../../action-log.php';
             } 
             // Print error message
             else{ 
                 $('#login_response').html(msg);
             }     
         }     
    });

    return false; // Prevents normal form submit since you posted using AJAX

});

Answer 6

由于您的输入类型是提交，因此单击功能不起作用。

<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
             ^^^^^

第一个选项是将您的 Button 类型更改为 Button 然后执行点击功能

<input type="button" name="login" id="login" value="Sign In" class="button blue" />

或执行提交事件而不是点击：

$("#login_form").submit(function{


});