單擊事件充當雙擊事件

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); }
        });
    });