Question

我有一个简单的表格：

<form id="form" action="file.php" method="POST">

  <input class="form-control" type="number"  name="p"  value="0">
  <label for="p">Text</label>

  <input class="form-control" type="number"  name="b"  value="0">
  <label for="b">Text 2</label>

  <input id="submit" type="submit" name="save" value="Save" tabindex="10"/>

  <div id="msg" class="alert-success" style="visibility: hidden;">Saved.</div>

</form>

用户提交此表单（可以无限次提交）后，他会收到一条成功消息，该消息将逐渐消失。

jQuery：

   $(document).ready()
    {
        $("#form").submit(function (event) {
            event.preventDefault();
            let url = $(this).attr("action");
            $.ajax({
                url: url,
                type: 'POST',
                data: $('#form').serialize(),
                success: function () {
                    $('#msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                },
                error: function () {
                    $('#error-msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                }
            });
        });
    }

我使用了动画，因为在这种情况下，当div消息消失后，布局中的其他元素将不会向上跳转。

但是问题是，当用户单击速度过快两次（只要消息仍然淡出）时，将来在单击时将不再显示成功消息。要使此消息再次显示，必须刷新页面。

不幸的是，我无法使代码在jsfiddle上运行，因为出现错误：{"error":"key missing: title"}（但这不是我的问题）

问题是：如果用户在衰落过程中多次单击，如何用消失的成功消息修复该错误？

更新：

因此，感谢@Kishan，此问题已解决。将ID添加到了提交按钮和AJAX中。

$.ajax({
        url: url,
        type: 'POST',
        data: $('#form').serialize(),
        beforeSend : function(){
            $("#submit").prop('disabled',true);
        },
        success: function () {
            $('#msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
            setTimeout(function(){
                $("#submit").prop('disabled',false);
            },1500);
        },
        error: function () {
            $('#error-msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
            setTimeout(function(){
                $("#submit").prop('disabled',false);
            },1500);
        }
    });

Answer 1

只需检查一下。

$(document).ready()
{
    $("#form").submit(function (event) {
        event.preventDefault();
        let url = $(this).attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            data: $('#form').serialize(),
            beforeSend : function(){
                $("#msg").prop('disabled',true);
            },
            success: function () {
                $('#msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                setTimeout(function(){
                    $("#msg").prop('disabled',false);
                },1500);
            },
            error: function () {
                $('#error-msg').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 1500);
                setTimeout(function(){
                    $("#msg").prop('disabled',false);
                },1500);
            }
        });
    });
}

jQuery：Multiclick中断动画

1 个答案: