javascript - Ajax 表单提交 PreventDefault() 不起作用

Question

所以基本上我想在显示页面内容之前显示一个正在加载的 gif。所以我做了两个像这样的div。

<div id="wait"><img src="img/loading.svg" style="width:max-width;height:50px;"></div>
<div id="content"></div>

我添加了一些 JavaScript 来隐藏加载 gif 并显示内容，如下所示

 $('#content').css('display', 'none');


$(document).ready(function() { setTimeout(function() {
$('#wait').css('display', 'none');
}, 3000);

setTimeout(function() {
$('#content').load('portfolio.html');
}, 3100);});

现在，当我这样做时，下面显示的 ajax 表单不起作用。

$(document).ready(function() {
//Validate Form Start
var form = $('#form');

form.submit(function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    console.log(form.serialize());

$.ajax({
    type: 'POST',
    url: form.attr("action"),
    data: form.serialize(),
    success: function(response) {
        console.log("Email Sent.");
        $('.form').html('Message Sent! Await response.');
        $('.form').attr('class', 'btn btn-success btn-lg btn-block form');
        function submitTimeout() {
            $('.form').html('Send Another Message?');
            $('.form').attr('class', 'btn btn-danger btn-lg btn-block form');
        }
        setTimeout(submitTimeout, 3000);
        form.each(function(){
            this.reset();
            });
        }
    });
});
//Validate form end.});

它不使用ajax来提交表单。尽管提到了 PreventDefault() 方法，它还是使用默认提交。请问有什么修复吗？

Answer 1

在提交函数末尾添加 return false;。它会成功的。