jQuery对话框中加载的页面中的按钮单击事件答案

【问题标题】：Button click event from page loaded in jquery dialogjQuery对话框中加载的页面中的按钮单击事件
【发布时间】：2013-08-11 15:52:05
【问题描述】：

我正在尝试在 jQuery 对话框中加载“取消”页面。

jQuery 对话框有确认按钮“YES”和“NO”。如果我点击“YES”按钮，它应该触发按钮 click 事件来自 jQuery 对话框中加载的 cancel.aspx 页面。

如何从加载的页面调用点击事件？

修改.aspx

<html>
    <div id="dialogCancel" style="display: none;"></div>
    <script type="text/javascript">
        $("#dialogCancel").load('Cancel.aspx').dialog({
            open: function() {
                $(".ui-dialog-titlebar-close").hide();
            },
            width: '300',
            height: '200',
            modal: true,
            draggable: false,
            resizable: false,
            show: {
                effect: 'fade',
                duration: 1500
            },

            buttons: {
                'Yes': function() {
                    //if YES fire button click event from cancel page loaded in jquery dialog.
                    location.reload(true);
                },
                    'No': function() {
                    $(this).dialog('close');
                }
            }
        });
    </script>

</html>

Cancel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cancel.aspx.cs" %>
<html>

    <head id="Head1" runat="server">
        <title></title>
        <link href="Scripts/Jquery/themes/dark-hive/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>

    <body bgcolor="red">
        <form id="Cancel" runat="server">
            <div id="div1">
                <center>
                    <br />
                    <br />
                    <asp:Button ID="btnCancel" runat="server" Text="Yes" Height="28px" Visible="False" onclick="btnCancel_Click" />
                </center>
            </div>
        </form>
    </body>

</html>

【问题讨论】：

标签： jquery asp.net dialog

【解决方案1】：

首先您必须修改标记。设置 btnCancel Visible="true"。 Visible="false" 将停止此控件的渲染。您希望按钮不可见，让我们在 css 中执行此操作：style="display:none"。这是我对 Cancel.aspx 的标记：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cancel.aspx.cs" %>

<html>

    <head id="Head1" runat="server">
        <title></title>
        <link href="Scripts/Jquery/themes/dark-hive/jquery-ui.css" rel="stylesheet" type="text/css" />
    </head>

    <body bgcolor="red">
        <form id="Cancel" runat="server">
            <div id="div1">
                <center>
                    <br />
                    <br />
                    <asp:Button ID="btnCancel" runat="server" Text="Yes" Height="28px" Visible="true" onclick="btnCancel_Click" style="display:none;"/>
                </center>
            </div>
        </form>
    </body>

</html>

现在我们需要在脚本中进行一些更改。我已经包含了 jquery 和 jquery ui。我们需要触发取消按钮的点击事件。但在那之后，我们需要确保我们没有在 out 测试中重新加载页面。我现在已经评论了这条线。这是使用 jquery 的 Modify.aspx 的标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/jquery-ui-1.8.24.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="dialogCancel" style="display: none;"></div>
    <script type="text/javascript">
        $("#dialogCancel").load('Cancel.aspx').dialog({
            open: function () {
                $(".ui-dialog-titlebar-close").hide();
            },
            width: '300',
            height: '200',
            modal: true,
            draggable: false,
            resizable: false,
            show: {
                effect: 'fade',
                duration: 1500
            },

            buttons: {
                'Yes': function () {
                    //if YES fire button click event from cancel page loaded in jquery dialog.
                    $("#btnCancel").trigger("click");
                    //location.reload(true);//Uncomment this line once you are done with testing
                },
                'No': function () {
                    $(this).dialog('close');
                }
            }
        });
    </script>

    </div>
    </form>
</body>
</html>

【讨论】：

谢谢 afzalulh，太棒了！ btncancel 点击事件工作正常。