Jquery 处理提交按钮的点击事件而不中断表单发布

Question

我有一个提交按钮和以下代码，一旦点击它就会执行一些操作：

<input name="Update" class="LongSubmit" id="Update" type="submit" WaitingValue="Updating..." value="Update"/>

        $('.LongSubmit').click(function() {
            $(this).attr('disabled', 'disabled');
            $(this).addClass('AjaxInProgress');
            $(this).val($('.LongSubmit').attr('WaitingValue'));
            $(this).closest('form').submit(); // Added so it submits the form
        })

我发现当我添加这个没有注释行的处理程序时，表单没有被提交，所以我添加了它，现在表单确实被提交了。

但是，如果我单击提交按钮以正常单击帖子中的表单，则有键 Update，但是当我在单击处理程序中以编程方式执行此操作时，该键不存在。

如何在不影响表单 POST 的情况下处理提交按钮的点击事件（即在此处使用 update 键）？
（或者我怎样才能完全模拟它，就好像处理程序不存在一样？）

---

正如 Zefiryn 所指出的，这是因为禁用了按钮，但我确实想这样做以防止多次点击。

Answer 1

如果您不禁用提交按钮，则可以使用其他技术来阻止重复提交。例如：

var submitFlag = 0;
$(function(){
    $('form').submit(function(){
        return submitFlag++ == 0;
    });
});

这将阻止任何重复提交您的表单。该标志将在页面重新加载或回发时重置（如果您使用 Ajax，您可以扩展它以在 ajax 响应上重置此标志）。这对你有帮助吗？

Answer 2

在 Zefiryn 的帮助下，我设法解决了这个问题，方法是仅在提交表单后禁用按钮：

    $(function() {

        $('.LongSubmit').click(function() {
            $(this).closest('form').submit();
            $(this).addClass('AjaxInProgress');
        })

        function DisableAjaxButtons() {
            $('.AjaxInProgress').val($('.AjaxInProgress').attr('WaitingValue'));
            $('.AjaxInProgress').attr('disabled', 'disabled');
        }

        $('form').submit(function() {
            setTimeout(DisableAjaxButtons, 1);
        })
    });

我仍然想看看是否有人对此（IMO）有任何想法，一些创建计时器的黑客解决方案只是在提交表单后发生。

Answer 3

密钥更新来自更新输入。它是提交按钮，但提交按钮总是与 POST 一起发送，所以我不知道问题出在哪里。如果您想从 POST 中删除此字段，您可以将 <input> 更改为 <button>（或任何其他标记）并在其上添加将提交表单的点击处理程序。