在触发服务器端事件的同时使用 jQuery 禁用按钮答案

【问题标题】：Disable button with jQuery while still firing server-side event在触发服务器端事件的同时使用 jQuery 禁用按钮
【发布时间】：2017-07-02 15:37:32
【问题描述】：

我知道以前曾发布过类似的问题，但我还没有看到具有以下某些要求的问题。

在我的标记中，我有一个 div，其中包含一个输入字段和一个 ASP.NET 按钮。该按钮有一个服务器端 OnClick 事件处理程序，它执行一些杂项。工作。

这是标记：

<div id="contactForm">
    <input type="text" id="email" runat="server" class="email" name="Email" placeholder="Email *" />  
    <asp:Button ID="plhButton" class="submit-btn" runat="server" OnClick="Submit_Click" Text="Request Information" />
</div>

和事件处理程序：

protected void Submit_Click(object sender, EventArgs e)
{            
    if (Page.IsValid)
    {
       EmailPost();
       //Do other stuff
    }
}

我还想要以下内容：

禁用按钮 4 秒
在禁用时更改按钮文本
重新启用后恢复按钮文本
检查验证

这是我的脚本来处理：

<script>
jQuery(document).ready(function ($) {

    var fewSeconds = 4;
    $(".submit-btn").click(function () {
        if (Page_ClientValidate()) {
            var btn = $(this);
            btn.prop('disabled', true);
            setTimeout(function () {
                btn.prop('disabled', false);
                btn.prop('value', 'Request Information');
            }, fewSeconds * 1000);

            btn.prop('value', 'Sending...');
        }
    });

});
</script>

一切正常，除了禁用按钮会阻止我的服务器端事件触发。因此，我在按钮中添加了 UseSubmitBehavior="false"：

<asp:Button ID="plhButton" class="submit-btn" runat="server" OnClick="Submit_Click" Text="Request Information" UseSubmitBehavior="false" />

现在，服务器端事件正常触发，但脚本内的代码（即禁用按钮、切换按钮文本）仅在第一次单击按钮时运行。

有什么想法可以让脚本代码多次运行吗？

【问题讨论】：

你不是提交了一个表单，所以 JavaScript 代码是无用的，因为一旦页面被提交，所有的代码都停止运行。
@epascarello 好点！我已经用函数pageLoad() 替换了$(document).ready，它现在似乎可以工作了。感谢您为我指明正确的方向:)

标签： jquery html asp.net onload

【解决方案1】：

@epascarello 为我指明了正确的方向；我将$(document).ready 切换为function pageLoad() 并做到了：

<script>
    function pageLoad(){
        var fewSeconds = 4;
        $(".submit-btn").click(function () {
            if (Page_ClientValidate()) {
                var btn = $(this);
                btn.prop('disabled', true);
                setTimeout(function () {
                    btn.prop('disabled', false);
                    btn.prop('value', 'Hmm.. Try again');
                }, fewSeconds * 1000);

                btn.prop('value', 'Sending...');
            }
        });

    };
</script>

【讨论】：