触发JQuery事件后未触发Codebehind OnClick事件

Question

我在表单上的几个字段上使用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事件。

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

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

Answer 1

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

您可以让JQuery form.submit事件在第一时间正常触发，但是当您单击Submit Button时，在button上添加一个“ DontFireJQuery”类，然后在将button设置为disable时，可以使用再次自动触发：

__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>

在CodeBehind中：

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秒钟后，在lblMsg中将显示“ OK”消息。 如您所知，每次回发后，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中使用，也没有任何问题。