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时，在按钮上添加一个“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>

在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秒后，“OK”消息将显示在lblMsg中。如您所知，在每次回发后，当显示OK消息时，JQuery应用的更改将消失，按钮将再次设置为enable。如果你想永久地将按钮设置为禁用，你可以改变后面的代码：

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

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

1 个答案: