ASP.NET按钮单击事件未触发

Question

我在div中有一个按钮,默认情况下是隐藏的,因为它被jQuery UI用作模态弹出窗口.

永远不会调用此按钮的单击事件处理程序,但如果我将按钮代码复制到此隐藏div之外,则它可以正常工作.我该如何解决这个问题？

这是我到目前为止的代码:

<div id="dialog" title="Notify Users">
    <div style="width:100%; height:500px; overflow:auto;">
       <asp:Repeater runat="server"  ID="rptNotify">
          <HeaderTemplate>
             <table>
          </HeaderTemplate>
          <ItemTemplate>
             <tr>
                <td>
                   <asp:CheckBox ID="chkUser" runat="server" Checked='<%# Eval("Checked") %>' />
                </td>
                <td>
                   <asp:Label ID="lblUser" runat="server" Text='<%# Eval("FullName") %>'/>
                </td>
             </tr>
          </ItemTemplate>
          <FooterTemplate>
             </table>
          </FooterTemplate>
       </asp:Repeater>
    </div>
    <asp:Button ID="btnSaveNotifications" runat="server" Text="Save" OnClick="btnSaveNotifications_Click" />
 </div>

显示/隐藏此div的代码是:

<script>
     // Increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;

     $(function () {
        $("#dialog").dialog({
           autoOpen: false,
           show: "blind",
           hide: "explode"
        });

        $("#opener").click(function () {
           $("#dialog").dialog("open");
           return false;
        });
     });
</script>

Answer 1

这里的问题是jQuery-UI 在元素之外创建对话框<form>,因此单击它永远不会提交表单.

要解决此问题,您可以将对话框<div>移回表单,而不是手动创建单击事件.我做了一个快速搜索,这个问题的答案已经涵盖了这个问题.

所以你只需要做这个改变:

<script>
     // increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;

     $(function () {
        var dialog = $("#dialog").dialog({
                        autoOpen: false,
                        show: "blind",
                        hide: "explode"
                     });

        // Move the dialog back into the <form> element
        dialog.parent().appendTo(jQuery("form:first"));

        $("#opener").click(function () {
           $("#dialog").dialog("open");
           return false;
        });
     });
</script>