event.preventDefault()在Mozilla或IE中无效

Question

我终于在其他浏览器中测试我的网站(主要在Chrome中构建).不幸的是,很多东西似乎功能不同.我将从第一个问题开始:在登录时,我有一个JS/jQuery检查以确保用户名和密码匹配,并且在失败时它应该停止提交.

然而,虽然它适用于Chrome和Safari,但在Mozilla和IE中,提交仍在进行中(打到道歉页面,但仍然是我根本看不到的东西).

我已经试过了胶层event.preventDefault()为e.preventDefault()或evt.preventDefault(),但他们没有工作,形式仍然提交(和后两个这使得它,让它在Chrome提交也是).这是我的代码,会喜欢任何想法:

function checkLogin()
{
    // get the variables, execute some other checks (eg, things not blank)

    // run ajax code to determine if pieces match
    $.ajax({
    type: "POST",
    url: "check_login.php", 
    data: {'username': username, 'password': password},
    async: false,
    success: function(result) 
    {
      if (result == 1)
      {
        $('#loginoff').html("Invalid username/password");
        e.preventDefault();
        return false;
      } 
      else
      {
        $('#loginoff').html("");
        return true;
      } 
    }
    });
}

请注意,当用户名和密码不匹配时,该功能肯定会通过并返回1,因为在所有情况下,都会出现"无效的用户名/密码"消息.

此外,如果有人对HTML感兴趣:

<form action="login.php" method="post" onsubmit="return checkLogin()">
<!-- code for inputs, eg username -->
<input type="submit" class="btn" value="Log In"/>
</form>

Answer 1

我建议阻止事件开始,然后当您希望表单提交时,使用本机提交方法执行它,因为它绕过了jQuery.

var form = document.getElementById("formid");
$(form).submit(function(e){
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "check_login.php",
        data: {
            'username': username,
            'password': password
        },
        //async: false,
        success: function (result) {
            if (result == 1) {
                $('#loginoff').html("Invalid username/password");
            } else {
                $('#loginoff').html("");
                form.submit(); // note, form is a form NODE, not a jQuery object containing a form.
            }
        }
    });

});

这也允许你删除async: false哪个总是好事(除了webworkers之外).