如何调用jquery函数然后触发按钮的点击事件？

Posted 2023-05-08

【中文标题】如何调用jquery函数然后触发按钮的点击事件？

【英文标题】：How to call jquery function then fire click event of button?

【发布时间】：2018-12-14 17:56:44

【问题描述】：

我需要在触发按钮的单击事件之前调用 jquery 函数，但在我的情况下，单击事件是在调用 jquery 函数之前触发的。 我的按钮是：

<asp:Button ID="btnConfrm" runat="server" Text="View" ForeColor="Black" Width="80px" CssClass="button" Height="30px" ValidationGroup="btn" OnClientClick="ConfirmDialog()" OnClick="OnConfirm" />

JQuery 函数是：

<script type="text/javascript">
    var confirm_value = document.createElement("INPUT");
     confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";

    function ConfirmDialog() 
        $('<div></div>').appendTo('body')
.html('<div><h4>' + 'Do you wanto to see previous data' + '?</h4></div>')
.dialog(
    modal: true, title: 'Carry forward!', zIndex: 10000, autoOpen: true,
    width: 'auto', resizable: false,
    buttons: 
        Yes: function () 
            //                $(obj).removeAttr('onclick');
            //                $(obj).parents('.Parent').remove();

            $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
            $(this).dialog("close");
            confirm_value.value = "Yes";
        ,
        No: function () 
            $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
            $(this).dialog("close");
            confirm_value.value = "No";
        
    ,
    close: function (event, ui) 
        $(this).remove();
    
);
document.forms[0].appendChild(confirm_value);

    ; 
</script>

而事件是：

Public Sub OnConfirm(ByVal sender As Object, ByVal e As EventArgs) Handles btn_show.Click

    Dim confirmValue As String = Request.Form("confirm_value")

    Session("confirm") = confirmValue

    If confirmValue = "Yes" Then
        gvCustomers.Visible = True
        grdblank.Visible = False

        Fill_grid()
    Else

        gvCustomers.Visible = False
        grdblank.Visible = True


        'End If
    End If
End Sub

我正在从 jquery 函数中获取确认值，但在按钮单击事件中值是什么。

【参考方案1】：

问题在于，当用户单击按钮时，您的 javascript 方法将被调用，但随后将回发到服务器，并且您的对话框将不再存在。所以你需要一些方法在回发发生之前显示对话框。

方法有很多种，这里举一个例子。它将通过在 OnClientClick (OnClientClick="ConfirmDialog(); return false;") 中添加“return false”来取消原始回发，如果用户单击“是" 它将执行回发。这样，服务器端的按钮点击事件只会在用户点击“是”时执行：

页面代码：

<asp:Button ID="btnConfrm" runat="server" Text="View" ForeColor="Black" Width="80px" CssClass="button" Height="30px" ValidationGroup="btn" OnClientClick="ConfirmDialog(); return false;" OnClick="OnConfirm" />

<script type="text/javascript">
    function ConfirmDialog() 
        $('<div></div>').appendTo('body')
            .html('<div><h4>' + 'Do you wanto to see previous data' + '?</h4></div>')
            .dialog(
                modal: true, title: 'Carry forward!', zIndex: 10000, autoOpen: true,
                width: 'auto', resizable: false,
                buttons: 
                    Yes: function () 
                        <%= ClientScript.GetPostBackEventReference(btnConfrm, Nothing) %>                            
                    ,
                    No: function () 
                        $(this).dialog("close");
                    
                ,
                close: function (event, ui) 
                    $(this).remove();
                
            );
    ;
</script>

在服务器端：

Public Sub OnConfirm(ByVal sender As Object, ByVal e As EventArgs) Handles btn_show.Click
        gvCustomers.Visible = True
        grdblank.Visible = False

        Fill_grid()       
End Sub

【讨论】：

confirm_value 在服务器端什么都不是，而我从对话框中选择是或否。好的，我将以不同的方式设置可见属性。谢谢。

如果我想在对话框中点击No调用其他方法，我该怎么做？

【参考方案2】：

更改 OnClientClick="return ConfirmDialog();"

<asp:Button ID="btnConfrm" runat="server" Text="View" ForeColor="Black" Width="80px" CssClass="button" Height="30px" ValidationGroup="btn" OnClientClick="return ConfirmDialog();" OnClick="OnConfirm" />