单击事件充当双击事件

我使用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>

来源

2014-03-06 danzerr

我们可以看到HTML代码吗？ –

@ Aurel300我的不好。我只是更新了我的文章:) – danzerr

而不是onclick使用$（表单）.onSubmit（）并防止默认 –

$('.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); } 
    }); 

});

来源

2014-03-06 03:12:52 sabithpocker

我觉得自己像个笨蛋。当然，我并不是想把它们都隐藏起来。将errorMsg从.hide（）更改为.show（），现在它工作正常。哦，天哪..谢谢大声笑！ – danzerr

请移动你的提交表单结束标记第一

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

以上按键被安置在</form>标签后，里面按钮。

来源

2014-03-06 03:11:43 HackerKarma

因为你点击输入型提交和进度阿贾克斯它;它会导致提交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); } 
     }); 
    });

来源

2014-03-06 03:13:38 fanfan1609

请尝试将提交按钮从表单中删除 – fanfan1609

单击事件充当双击事件

回答

相关问题