php - ajax 不适用于 firefox，但可以完美地与其他浏览器一起使用。错误日志说：ReferenceError 事件未定义

Question

下面的 ajax 在 chrome、IE、opera 和 safari 中完美运行。但它是，不知何故不能在Firefox中工作。它说参考错误，事件未定义。我也尝试使用 event.preventDefault() 而不是 return false，这对我来说肯定没有运气。单击提交按钮时，在 Firefox 中页面跳转到 loginCheck.php 并显示成功。但这不是我的意思，消息“成功”应该在同一页面本身返回，而不是跳转到另一个页面并在另一个页面中显示消息。

形式是这样的：

<form id="loginForm" class="ajax" action="ajax/loginCheck.php" style="padding-left: 10px;" method="post">

Username: <br/>
<input name="username" class="required" type="text"> <br/> 

<span class="small">
<a class="mouseOver forgot" href="include/recover.php?mode=u_name">Forget username ?</a>
</span><br/>

Password: </br>
<input name="password" class="required" type="password"> <br/>
<span class="small">
<a class="mouseOver forgot" href="include/recover.php?mode=u_password">Forget password ?</a>
</span><br/>

<input type="submit" class="button" value="sign in">

    //when login button is clicked
(function(){

    $('form.ajax').on('submit' , function(){
    //alert('about to pass data');
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};  //declaration of data of array type

    that.find('[name]').each(function(index, value){
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,

        success: function(response){    //code to run if request success

            var result = $.trim(response);
            console.log(response);
            if(result == "success"){
                $('#interaction').load('interaction.php'); //load logout icong
                $('#rightbar').load('rightbar.php');    //load user panel
                $('.loginCheck').html("");
            }else{
                $('.loginError').show();
                $('.loginError').html(response);
            }
        }
    });

        return false;
    });

})();

Answer 1

第一次改变

<input type="submit" class="button" value="sign in">

到：

<input id='btn_login' type="button" class="button" value="sign in">

然后使用以下javascript：

//when login button is clicked
(function(){

$('#btn_login').on('click' , function(){
    //alert('about to pass data');
    var that = $('#loginForm'),
    url = 'ajax/loginCheck.php';
    type = 'post';
    data = {};  //declaration of data of array type

    that.find('[name]').each(function(index, value){
        var that = $(this),
        name = that.attr('name'),
        value = that.val();

        data[name] = value;
    }); 

    $.ajax({
        url: url,
        type: type,
        data: data,

        success: function(response){    //code to run if request success

            var result = $.trim(response);
            console.log(response);
            if(result == "success"){
                $('#interaction').load('interaction.php'); //load logout icong
                $('#rightbar').load('rightbar.php');    //load user panel
                $('.loginCheck').html("");
            }else{
                $('.loginError').show();
                $('.loginError').html(response);
            }   
        }   
    }); 

    return false;
  }); 

  })();
  </script>