OnClick事件不会在触发JQuery事件后被触发

Codebehind OnClick event is not fired after firing JQuery event

本文关键字：事件 JQuery OnClick      更新时间：2023-09-26

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

我如何确定通过javascript/jquery时，html5约束验证已经通过，所以我可以执行一个jquery函数，禁用按钮，但仍然允许我的btnSubmit_click事件火灾?

更新:我使用纯JQuery 2.0.3

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

你可以让JQuery表单。提交事件通常在第一次触发，但当你点击提交按钮，添加一个"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>
In 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中使用，没有任何问题

相关文章：