单击事件充当双击事件

Question

我正在使用Ajax提交登录表单而不刷新页面。 我添加了一个函数来查看数据是否返回“错误”（当用户输入不正确的电子邮件/密码时出现）。 如果未返回“错误”，则表明用户已登录，并将在2秒内转移到该页面。

问题是我的按钮就像双击按钮一样，我看不出原因。 这是我的JS文件：

$(function() { 
    $("#goLogin").click(function() {
        $.ajax({
            type: "POST",
            url: "db-requests/db-login.php",
            data: $("#loginForm").serialize(),
            success: function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
        });
    });
});

function finishLogin( data , textStatus ,jqXHR ) {

    if ( data == "error" ) {
        $('.errorMsg').fadeIn(500).hide();
        $('.succesMsg').fadeOut(300).hide();
    } else {
        $('.succesMsg').fadeIn(500).show();
        $('.errorMsg').fadeOut(300).hide();
        setTimeout("location.href = 'protected.php';",2000);
    }

}

我试过将其放在document_ready标记之间，但这也不起作用。

HTML代码的一部分：

<div class="login form">

            <div class="login-header">Please Login</div>

            <form method="post" id="loginForm" name="form">

                <label for="email" class="short">Email*</label>
                <input type="text" name="email" id="email" class="required" placeholder="" />

                <label for="password" class="short">Password *</label>
                <input type="password" name="password" id="password" class="required" placeholder="" maxlength="15" />

            </form>

            <div id="login-functions">
                <div class="loginbtn-container">
                    <input type="submit" id="goLogin" name="goLogin" class="button green" value="Login" /> 
                </div>

                <div class="login form actions">
                <p class="register account">Register an account</p>
                <p class="request password">Lost your password?</p>
                </div>
           </div>

</div>

        <div class="errorMsg">Incorrect. Please recheck your details</div>
        <div class="succesMsg"><b>You've been logged in!</b> Please wait while we transfer you</div>

Answer 1

请先将您的提​​交按钮移至表单结束标记内

<input type="submit" id="goLogin" name="goLogin" class="button green" value="Inloggen" />

上面的按钮位于</form>标记之后。

Answer 2

$('.errorMsg').fadeIn(500).hide();
$('.succesMsg').fadeOut(300).hide();

你是说把两者都藏起来吗？ 我认为该click很好，尽管理想情况下您应该submit

将您的submit到表单中，并使用preventDefault()阻止普通表单提交

$("#goLogin").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "db-requests/db-login.php",
        data: $("#loginForm").serialize(),
        success: function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
    });

});

Answer 3

因为您单击输入类型，然后提交并进行Ajax处理； 它导致提交2次。

为了避免这种情况，您可以使用上面所说的Zach Leighton； 或如下使用

$("#goLogin").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "db-requests/db-login.php",
            data: $("#loginForm").serialize(),
            success: function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
        });
    });