codebehind OnClick事件触发JQuery的事件后，不会触发 [英] Codebehind OnClick event is not fired after firing JQuery event

问题描述

我用我的窗体上的几个领域，如HTML5约束验证：

I'm using html5 constraint validation on a few fields on my form, such as:

<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上单击要禁用提交按钮，但只有在验证通过。我试图钩到表单提交事件，像这样：

And I would like to disable the submit button through CSS and JQuery on click, but only AFTER the validation passes. I attempted to hook into the form submit event like so:

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

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

成功地验证禁用后该按钮，回传叫，但我的 btnSubmit_click 事件不会被解雇。

我如何通过javacript / jQuery的确定何时HTML5约束验证已通过，所以我可以执行禁用按钮jQuery的功能，但随后仍允许我 btnSubmit_click 事件触发？

How do I determine through javacript/jquery when html5 constraint validation has passed so I can execute a jquery function that disables the button but then still allows my btnSubmit_click event to fire?

更新：
我使用的是普通的JQuery 2.0.3

Update: I'm using plain JQuery 2.0.3

推荐答案

这是一个常见的​​问题在某些情况下同时开火codebehind事件和JQuery事件。你可以使用一些技巧来克服这个问题，但我用这一个作为一个肮脏的解决方案，也许有一些更清洁的方式了。

It's a common issue to fire Codebehind events and JQuery events simultaneously in some cases. you can use some tricks to overcome this issue but i'm using this one as a dirty solution, maybe there are some cleaner ways too.

您可以让JQuery的form.submit火灾事件通常第一次，但是当你点击提交按钮，添加一个DontFireJQuery类按钮后设置按钮为禁用，它会自动再次使用燃煤：

You can let the JQuery form.submit event fire normally in first time, but when you click on Submit Button, add a "DontFireJQuery" class to button and after set button as disable, It's fired again automatically using :

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

在接下来的射击，按钮有DontFireJQuery级和JQuery跳过它，所以codebehind OnClick事件被激发。

In the next firing, the button has "DontFireJQuery" class and JQuery skip it, so the Codebehind OnClick event is fired.

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

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秒后，OK消息将在lblMsg所示进行。
如你所知，每次回发后，由JQuery的应用更改将消失，按钮设置显示的OK消息时，如再次启用。
如果你想永久设置按钮关闭，您可以更改code背后是这样的：

is for test, in order to show that the button is set as disable immediately and 1 sec later, "OK" message will be shown in lblMsg. as you know, after each postback, the changes that applied by JQuery will be vanished and button is set as enable again when the OK message shown. if you want to set button as disable permanently, you can change the code behind like this:

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

这code写的，可以在UpdatePanel的使用也没有任何问题的方法。

This code is written in a way that can be used in UpdatePanel without any problems too.

这篇关于codebehind OnClick事件触发JQuery的事件后，不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！