jquery - 命令“show()”在 jquery 提交表单中不起作用？

Question

最简单的例子是当用户点击提交时，我想显示一个 div，其中有一个 gif 表示消息正在发送。

Javascript:

//Send mail
$("div.contato-pedidooracao form").submit(function () {

    $(".sending").show(); //HERE.. DONT WORK!!  why??
    $(".contato-pedidooracao form").hide(); //THIS WORKS!!

    var dataString = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "Contato/SendMail",
        data: dataString,
        dataType: "json",
        success: function (data) {
            $(".sendMessage").empty();
            $(".sendMessage").append("<p>Mensagem enviada com sucesso</p>")
            $(".sendMessage").append("<p>Rezaremos por você!</p>")
            $(".sendMessage").show();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $(".sendMessage").empty();
            $(".sendMessage").append("<p>Ocorreu um erro ao tentar enviar a mensagem</p>")
            $(".sendMessage").append("<p>Por favor, tente novamente mais tarde.</p>")
            $(".sendMessage").show();
            $(".contato-pedidooracao form").show();
        }
    });
    $(".sending").hide();
    event.preventDefault();

});

HTML

<div class="content contato-pedidooracao">
    @using (Html.BeginForm())
    {
        <p>Conte-nos seu pedido</p>
        <div class="inline">
            @Html.Label("name", "Nome:")
            @Html.TextBox("name", "")
        </div>
        <div class="inline">
            @Html.Label("phone", "Telefone:")
            @Html.TextBox("phone", "", new { @class = "phone" })
            @Html.TextBox("cel", "", new { @class = "phone" })
        </div>
        <div class="inline">
            @Html.Label("email", "e-mail:")
            @Html.TextBox("email", "", new { @class = "email" })
        </div>
        <div class="inline">
            @Html.Label("message", "Mensagem:")
            @Html.TextArea("message", "")
        </div>
        <div class="submit">
            <input type="submit" value="Enviar" title="Enviar" />
        </div>
    }
    <div class="message sending">
        <p>Enviando mensagem</p>
        <img src="@Href("~/Images/ajax-loader.gif")" alt="Enviando..." />
    </div>
    <div class="message sendMessage"></div>
</div>

我不知道它是否相关..但是 CSS 的一部分:

div.column > div.contato-pedidooracao > div.message
{
    display:none;
}
.sending, .sendMessage
{
    text-align:center;
}

处理平均需要 5 秒，但是 div.sending 没有出现在这个时间间隔内..

Answer 1

因为AJAX是异步的，JS不会等待。所以放在 AJAX 之后的 $(".sending").hide(); 实际上是在 $(".sending").show(); 之后执行的>.

尝试将 $(".sending").hide(); 放在 AJAX 中成功和错误函数的末尾。