触发 JQuery 事件后不会触发 Codebehind OnClick 事件答案

【问题标题】：Codebehind OnClick event is not fired after firing JQuery event触发 JQuery 事件后不会触发 Codebehind OnClick 事件
【发布时间】：2014-09-18 11:29:49
【问题描述】：

我在表单的一些字段上使用了 html5 约束验证，例如：

<asp:TextBox ID="TextBox1" runat="server" Required="required" ToolTip="Description is required."></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

我想在点击时通过 CSS 和 JQuery 禁用提交按钮，但只有在验证通过之后。我试图像这样挂钩表单提交事件：

<script type='text/javascript'>
var $form = $('#form1');
var $submitButton = $('#<% = btnSubmit.ClientID %>');

$form.submit(function () {
$submitButton.prop('disabled', true);
})
</script>

验证后成功禁用按钮，会调用回发，但不会触发我的btnSubmit_click 事件。

如何通过 javacript/jquery 确定何时通过了 html5 约束验证，以便我可以执行禁用按钮但仍允许我的 btnSubmit_click 事件触发的 jquery 函数？

更新： 我正在使用普通的 JQuery 2.0.3

【问题讨论】：

标签： javascript jquery asp.net html validation

【解决方案1】：

在某些情况下同时触发 Codebehind 事件和 JQuery 事件是一个常见问题。您可以使用一些技巧来克服这个问题，但我将这个用作肮脏的解决方案，也许还有一些更清洁的方法。

您可以让 JQuery form.submit 事件在第一次正常触发，但是当您单击提交按钮时，将“DontFireJQuery”类添加到按钮并在将按钮设置为禁用后，它会再次自动触发：

__doPostBack("<%= btnSubmit.UniqueID %>", "");

在下一次触发中，按钮具有“DontFireJQuery”类，JQuery 跳过它，因此触发 Codebehind OnClick 事件。

<asp:TextBox ID="TextBox1" runat="server" Required="required" ToolTip="Description is required."></asp:TextBox>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>

<script type='text/javascript'>
    Sys.Application.add_load(initJScripts);
    function initJScripts() {
        var $form = $('#form1');
        var $submitButton = $('#<% = btnSubmit.ClientID %>');
        if (!$submitButton.hasClass("DontFireJQuery")) {
            $form.submit(function () {
                $submitButton.addClass("DontFireJQuery");
                $submitButton.prop('disabled', true);
                __doPostBack("<%= btnSubmit.UniqueID %>", "");
            })
        }
    }
</script>

在代码隐藏中：

Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
    System.Threading.Thread.Sleep(1000)
    lblMsg.Text = "OK"
End Sub

（如果需要，您可以使用此在线工具将 VB 转换为 C#：http://codeconverter.sharpdevelop.net/SnippetConverter.aspx）

这一行：

System.Threading.Thread.Sleep(1000)

用于测试，为了显示按钮被设置为立即禁用，1 秒后，“OK”消息将显示在 lblMsg 中。如您所知，在每次回发后，JQuery 应用的更改将消失，并且在显示 OK 消息时按钮再次设置为启用。如果您想将按钮设置为永久禁用，您可以像这样更改后面的代码：

Private Sub btnSubmit_Click(sender As Object, e As EventArgs) Handles btnSubmit.Click
    System.Threading.Thread.Sleep(1000)
    btnSubmit.Enabled = False
    lblMsg.Text = "OK"
End Sub

这段代码的编写方式也可以毫无问题地在 UpdatePanel 中使用。

【讨论】：