Php 拉维公司；JQuery表单按钮单击动画仅在表单无效然后有效时发生一次

我在发送电子邮件表单上有一个按钮，我想将其动画化为“发送”，直到post响应返回一个值。除非用户不符合输入验证（例如，没有输入电子邮件），否则它工作得很好。将显示一条错误消息，我的代码将按钮更改回正常状态，这很好。问题是，如果他们随后将输入更改为有效，然后再次单击“发送”按钮，则该按钮不会更改，但post仍会发生。只是这一次，用户不知道它当前正在发送，因为按钮没有更改或被禁用。总体目标是在加载时停止多次单击send按钮

HTML（在.blade.php文件中使用Laravel语法）：

Jquery：

$("#completeExportToMail").click(function(){
    var formData = $("#mailExportForm").serialize();
    var modal = '#modalEmailSave';
    $("#addError").empty();
    $('#modalEmailSave .help-inline').remove();
    $('#modalEmailSave .control-group').removeClass('error');
    validateForm();

    if($("#mailExportForm").valid()){
        $("#completeExportToMail").html('Sending... <img src="../../../assets/img/loading.gif" alt="." style="width:15px; height:15px; margin-top:-4px;"></img>');
        $('#completeExportToMail').prop('disabled', true);

        $.post(site+'object/mail', formData, function(response){
            if(response.status){
               $(modal).modal('hide');
               $(modal).on('hidden', function () {
                  $(modal+' #email').val('');
               });
            }
            else{
                $("#mailError").text(response.errors);
            }

            //Button reset whether or not email actually sends
            $("#completeExportToMail").html('Send');
            $('#completeExportToMail').prop('disabled', false);
        },'json');
    }
});

$（“#completeExportToMail”）。单击（函数（）{
var formData=$（“#mailExportForm”）.serialize（）；
var modal='#modalEmailSave'；
$（“#addError”）.empty（）；
$（'#modalEmailSave.help inline'）.remove（）；
$（'#modalEmailSave.control group'）.removeClass（'error'）；
validateForm（）；
if（$（“#mailExportForm”）.valid（）{
$（“#completeExportToMail”）.html（'Sending…'）；
$（'completeExportToMail'）.prop（'disabled'，true）；
$.post（站点+‘对象/邮件’、表单数据、函数（响应）{
如果（响应状态）{
$（模态）.modal（'hide'）；
$（模态）.on（'hidden'，函数（）{
$（模态+'#电子邮件'）.val（“”）；
});
}
否则{
$（“#mailError”）.text（response.errors）；
}
//按钮重置是否实际发送电子邮件
$（“#completeExportToMail”）.html（'Send'）；
$（'completeExportToMail'）.prop（'disabled'，false）；
}“json”）；
}
});

---

谢谢

我想出来了！在线查看切换按钮的代码块后，我添加了

returnfalse到我的JQuery结束，它成功了

$("#completeExportToMail").click(function(){
var formData = $("#mailExportForm").serialize();
var modal = '#modalEmailSave';
$("#addError").empty();
$('#modalEmailSave .help-inline').remove();
$('#modalEmailSave .control-group').removeClass('error');
validateForm();

if($("#mailExportForm").valid()){
    $("#completeExportToMail").html('Sending... <img src="../../../assets/img/loading.gif" alt="." style="width:15px; height:15px; margin-top:-4px;"></img>');
    $('#completeExportToMail').prop('disabled', true);

    $.post(site+'object/mail', formData, function(response){
        if(response.status){
           $(modal).modal('hide');
           $(modal).on('hidden', function () {
              $(modal+' #email').val('');
           });
        }
        else{
            $("#mailError").text(response.errors);
        }

        //Button reset whether or not email actually sends
        $("#completeExportToMail").html('Send');
        $('#completeExportToMail').prop('disabled', false);
    },'json');

    return false;
}
});

$（“#completeExportToMail”）。单击（函数（）{
var formData=$（“#mailExportForm”）.serialize（）；
var modal='#modalEmailSave'；
$（“#addError”）.empty（）；
$（'#modalEmailSave.help inline'）.remove（）；
$（'#modalEmailSave.control group'）.removeClass（'error'）；
validateForm（）；
if（$（“#mailExportForm”）.valid（）{
$（“#completeExportToMail”）.html（'Sending…'）；
$（'completeExportToMail'）.prop（'disabled'，true）；
$.post（站点+‘对象/邮件’、表单数据、函数（响应）{
如果（响应状态）{
$（模态）.modal（'hide'）；
$（模态）.on（'hidden'，函数（）{
$（模态+'#电子邮件'）.val（“”）；
});
}
否则{
$（“#mailError”）.text（response.errors）；
}
//按钮重置是否实际发送电子邮件
$（“#completeExportToMail”）.html（'Send'）；
$（'completeExportToMail'）.prop（'disabled'，false）；
}“json”）；
返回false；
}
});

$("#completeExportToMail").click(function(){
var formData = $("#mailExportForm").serialize();
var modal = '#modalEmailSave';
$("#addError").empty();
$('#modalEmailSave .help-inline').remove();
$('#modalEmailSave .control-group').removeClass('error');
validateForm();

if($("#mailExportForm").valid()){
    $("#completeExportToMail").html('Sending... <img src="../../../assets/img/loading.gif" alt="." style="width:15px; height:15px; margin-top:-4px;"></img>');
    $('#completeExportToMail').prop('disabled', true);

    $.post(site+'object/mail', formData, function(response){
        if(response.status){
           $(modal).modal('hide');
           $(modal).on('hidden', function () {
              $(modal+' #email').val('');
           });
        }
        else{
            $("#mailError").text(response.errors);
        }

        //Button reset whether or not email actually sends
        $("#completeExportToMail").html('Send');
        $('#completeExportToMail').prop('disabled', false);
    },'json');

    return false;
}
});