asp 按钮在 jquery 模态对话框中点击不触发

Question

<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" />
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr> 
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </div>

<script type="text/javascript">
    $(function () {
        $("[id*=btnShowPopup]").click(function () {
            ShowPopup();
            return false;
        });
    });

    function ShowPopup() {
        $("#dialog").dialog({
            title: "Test",
            width: 500,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
     }
</script>

我正在尝试将 textbox1 值传递给按钮 1 上的 label1 单击 event.But 不幸的是 asp 按钮单击事件未在模态上触发 dialog.Give 我以正确的方式纠正它的解决方案。

Answer 1

试试下面的代码：

function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }

由于回发，弹出窗口将丢失。为了在回发时再次显示弹出窗口，我们可以维护一个隐藏字段

<head runat="server">

    <title></title>
    <script type="text/javascript" src="content/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
$(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });

            $('#Button1').click(function () {
                $('#hdnPostback').val(true);
            });

            if ($('#hdnPostback').val() == 'true') {
                $('#hdnPostback').val(false);
                ShowPopup();
            }
        });

        function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }
    </script>
</head>
<body >
    <form id="form1" runat="server">
    <asp:Button ID="btnShowPopup" runat="server" Text="Show popup" />
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr> 
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <asp:HiddenField runat="server" ID="hdnPostback" Value="false" />
    </div>
    </form>
</body>

如果是母版页 - 客户端 ID 是动态生成的（因此隐藏控件的 ID 不再是 hdnPostback）

基于此，代码需要修改如下：

$(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });

            var hdnPostbackID = '<%= hdnPostback.ClientID %>'

            $('#Button1').click(function tt() {
                $('#' + hdnPostbackID).val(true);
            });

            if ($('#' + hdnPostbackID).val() == 'true') {
                $('#' + hdnPostbackID).val(false);
                ShowPopup();
            }
        });


        function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }

Answer 2

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:Button ID="btnShowPopup" runat="server" Text="Show popup" />
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr> 
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <asp:HiddenField runat="server" ID="hdnPostback" Value="false" />
    </div>
</asp:Content>

<script type="text/javascript">
        $(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });

            $('#Button1').click(function tt() {
                $('#hdnPostback').val(true);
            });

            if ($('#hdnPostback').val() == 'true') {
                $('#hdnPostback').val(false);
                ShowPopup();
            }
        });


        function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }

</script>

asp 按钮在 jquery 模态对话框中点击不触发

asp button click not firing on jquery modal dialog

asp.net

jquery

modal-dialog