javascript - 如何在使用 jQuery 提交表单后显示 loading-div？

Question

我是 Javascript 和 jQuery 的新手。我想在用户提交表单后显示“loading-gif”，但无法弄清楚为什么我的代码不起作用。情况是这样的:

• 表单的 id="form"
• loading-div 有 id="loading"和 style="display:none"(当然还有其他一些)
• 提交按钮有 class="formtrigger"(没有 type="submit")

这是我的 javascript(在 html 页面底部的 jquery 之后初始化):

    $('.formtrigger').click(function() {
      $('#loading').show();
      $('#form').submit();
    });

当我点击按钮时，表单被提交，但 loading-div 没有出现。我尝试了行“$('#loading').show();”无需将其绑定(bind)到点击事件上，它就可以工作。我也试过这段代码:

$('.formtrigger').click(function() {
    alert('blablabla');
    $('#form').submit();
});

两个语句都有效!首先显示警报，然后提交表单。为什么其他代码不起作用？

提前致谢。

编辑:我也尝试了以下变体但没有成功

$('.formtrigger').click(function() {
    $('#form').submit();
});
$('#form').submit(function() {
    $('#loading').show();
});

和

$('.formtrigger').click(function() {
    $('#loading').show();
    window.setTimeout($('#form').submit(), 5000);
});

和

 //HTML
 <button type="submit">...</button>
 //JS
 $('#form').submit(function() {
     $('#loading').show();
 });

Answer 1

在您的 .submit() 中，显示您的加载微调器:

$("#loading").show();

在你的 .submit() 完成后，隐藏它:

$("#loading").hide();

并使您的微调器默认为 display: none;，因为上面的 jQuery 只是更改指定元素的 css 属性。

---

我为您提供了一个简单的演示，其中我有一个 AJAX 函数从文本输入中回显您的消息。它将显示加载微调器，直到成功为止。

Fiddle Demo