我有一个默认为隐藏，因为它被用作一个模式弹出的jQuery UI的一个专区内的按钮。

Click事件处理程序为这个按钮永远不会被调用，但如果我复制按钮code的这个隐藏分区外，然后它工作正常。我该如何解决这个问题？

这是在code我到目前为止有：

 ＆LT; D​​IV ID =对话框中的标题=通知用户＆GT;
    ＆LT; D​​IV的风格=宽度：100％;高度：500px的;溢出：汽车;＆GT;
       ＆LT; ASP：直放站=服务器ID =rptNotify＆GT;
          ＆LT; HeaderTemplate中＆GT;
             ＆LT;表＆gt;
          ＆LT; / HeaderTemplate中＆GT;
          ＆LT;的ItemTemplate＆GT;
             ＆其中; TR＆GT;
                ＆LT; TD＆GT;
                   ＆LT; ASP：复选框ID =chkUser=服务器选中='＆LT;％＃的eval（选中）％＆GT; /＆GT;
                ＆LT; / TD＆GT;
                ＆LT; TD＆GT;
                   ＆LT; ASP：标签ID =lblUser=服务器文本='＆LT;％＃的eval（全名）％＆GT;/＆GT;
                ＆LT; / TD＆GT;
             ＆LT; / TR＆GT;
          ＆LT; / ItemTemplate中＆GT;
          ＆LT; FooterTemplate＆GT;
             ＆LT; /表＆gt;
          ＆LT; / FooterTemplate＆GT;
       ＆LT; / ASP：直放站＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; ASP：按钮的ID =btnSaveNotifications=服务器文本=保存的OnClick =btnSaveNotifications_Click/＆GT;
 ＆LT; / DIV＆GT;
 

在code显示/隐藏此格是：

 ＆LT;脚本＆GT;
     //增加默认动画速度夸大效果
     $ .fx.speeds._default = 1000;

     $（函数（）{
        $（＃对话）。对话框（{
           的AutoOpen：假的，
           显示：盲目，
           隐藏：爆炸
        }）;

        $（＃开门红）。点击（函数（）{
           $（＃对话）对话框（开放）。
           返回false;
        }）;
     }）;
＆LT; / SCRIPT＆GT;
 

解决方案

这里的问题是，jQuery的UI的创建对话框的之外的＆LT;形式GT; 元素，所以点击它永远不会提交表单。

要解决这个问题，而不是手动创建一个点击事件，你可以移动对话框＆LT; D​​IV＆GT; 回形式。我已经做了一个快速检索和答案这个问题涵盖了问题。

所以，你只需要进行更改：

 ＆LT;脚本＆GT;
     //增加默认动画速度夸大效果
     $ .fx.speeds._default = 1000;

     $（函数（）{
        VAR对话框= $（＃对话）。对话框（{
                        的AutoOpen：假的，
                        显示：盲目，
                        隐藏：爆炸
                     }）;

        //将对话框回的＆lt;形式GT;元件
        。dialog.parent（）appendTo（jQuery的（形式：一是））;

        $（＃开门红）。点击（函数（）{
           $（＃对话）对话框（开放）。
           返回false;
        }）;
     }）;
＆LT; / SCRIPT＆GT;
 

I have a button within a div which is hidden by default as it is used as a modal popup by jQuery UI.

The click event handler for this button never gets called, yet if I copy the button code outside of this hidden div then it works correctly. How do I get around this problem?

This is the code I have so far:

<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>

The code to show /hide this div is:

<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>

The problem here is that jQuery-UI creates the dialog outside of the <form> element, so clicking on it never submits the form.

To get around this, rather than create a click event manually, you can just move the dialog <div> back into the form. I did a quick search and the answer to this question already covers the issue.

So you just need to make this change:

<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>