Question

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />

脚本

     <script type="text/javascript">
         $("[id*=btnModalPopup]").live("click", function () {
             $("#modal_dialog").dialog({
                 title: "jQuery Modal Dialog Popup",
                buttons: {

                 },
               modal: true
             });
             return false;
         });

    </script>

弹出Div

    <div id="modal_dialog" style="display: none">
    <asp:FileUpload ID="FileUpload6" CssClass="CS" runat="server" />
  <asp:Button ID="btnpopupupload" runat="server" Text="UPLOAD" onclick="btnpopupupload_Click"/>
    </div>

代码背后

 protected void btnpopupupload_Click(object sender, EventArgs e)
    {
    }

当同一个按钮位于modal_dialog div之外时，我可以触发buttonclick事件。

Answer 1

尝试

  $(document).on("click","[id*=btnModalPopup]" function () {
    $("#modal_dialog").dialog({
            title: "jQuery Modal Dialog Popup",
            buttons: {
        },
        modal: true
    });
    return false;
});

最好为按钮提供类名，因为.net会在渲染时更改按钮的ID

或您可以使用

$(document).on("click",".classname" function () {
    $("#modal_dialog").dialog({
            title: "jQuery Modal Dialog Popup",
            buttons: {
        },
        modal: true
    });
    return false;
});

Answer 2

尝试在此处使用 event delegation ：

$('body').on("click", "[id*=btnModalPopup]"function () {
    $("#modal_dialog").dialog({
        title: "jQuery Modal Dialog Popup",
        buttons: {

        },
        modal: true
    });
    return false;
});

Answer 3

将按钮控件更改为链接按钮控件，如下所示。

 <asp:LinkButton ID="btnpopupupload" runat="server" Text="UPLOAD" onclick="btnpopupupload_Click"/>

如果上述解决方案无效，请在脚本中添加以下代码。

   <script type="text/javascript">
         $("[id*=btnModalPopup]").live("click", function () {
             $("#modal_dialog").dialog({
                 title: "jQuery Modal Dialog Popup",
                buttons: {

                 },
               modal: true
             }).parent().appendTo($("form:first"));
             return false;
         });

    </script>

无法从Modal PopUp中触发Button Click事件

3 个答案: