在模式弹出窗口内单击按钮无效

Question

我有一个div，其中有一个FileUpload和Button Click 。 div是一个弹出部分。 见HTML

<div id="modal_dialog" style="display: none;">
                    <asp:FileUpload ID="FileUpload1" runat="server" />
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" CausesValidation="false" OnClick="btnUpload_Click" CssClass="btn btn-danger" />
                </div>
                <asp:Button ID="btnModalPopup" runat="server" CssClass="btn btn-danger" Text="Upload Excel" />

但是只要我打开弹出窗口并上传文件，然后单击提交按钮。 该按钮不起作用。

请参阅Javascript以调用弹出窗口：

$("[id*=mainContent_btnModalPopup]").live("click", function () {
        $("#modal_dialog").dialog({
            title: "Upload Sheet",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
        return false;
    });

Answer 1

您可以尝试此代码

$(function () {
        $("[id*=btnModalPopup]").live("click", function () {
            $("#modal_dialog").dialog({
                title: "Upload Sheet",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    },
                },
                open: function (type, data) { $(this).parent().appendTo("form"); },
                modal: true
            });
            return false;
        });
    })


<form id="form1" runat="server">
    <div id="div1" style="display: none">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Upload" CausesValidation="false" OnClick="btnUpload_Click" />
    </div>
    <asp:Button ID="Button2" runat="server" Text="Show Modal Popup" />

</form>

 protected void btnUpload_Click(object sender, EventArgs e)
        {
            if (FileUpload1.HasFile)
            {
                string fileName = FileUpload1.FileName;

                FileUpload1.SaveAs("~/Images/" + fileName);
            }
        }

Answer 2

在这种情况下，我通常将这些按钮隐藏起来，并从UIDialog按钮中调用它们：

首先，向您的按钮添加两个类：

            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="Upload" CausesValidation="false" OnClick="btnUpload_Click" CssClass="btn btn-danger upLoadClass" />
        </div>
        <asp:Button ID="btnModalPopup" runat="server" CssClass="btn btn-danger upLoadExcelClass" Text="Upload Excel" />

然后在您的jquery函数中：

$("#modal_dialog").dialog({
    title: "Upload Sheet",
    buttons: {
        Upload: function () {
            $(this).find('.upLoadClass').click();
            $(this).dialog('close');
        },
        UploadExcel: function () {
            $(this).find('.upLoadExcelClass').click();
            $(this).dialog('close');
        },
        Close: function () {
            $(this).dialog('close');
        }
    },
    modal: true
});