javascript - 触发 JQuery 事件后不会触发代码隐藏 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 在单击时禁用提交按钮，但只有在验证通过之后。我尝试像这样 Hook 表单提交事件:

<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

Answer 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秒后，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 中使用，没有任何问题。