Click event does not fire in nested user control and will not debug

Question

I'm using VS 2012/ASP.NET (web forms) 4.5. I have a page with a conventional user control:

<%@ Page Title="" Language="C#" MasterPageFile="~/ControlCenter/MasterAdmin.master" AutoEventWireup="true" CodeFile="OrderDetail.aspx.cs" Inherits="ControlCenter_OrderDetail" %>

<%@ register src="~/Controls/OrderDetailMenu.ascx" tagprefix="eoi" tagname="OrderDetailMenu" %>

<asp:content ID="OrderDetailHead" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.20.js"></script>
</asp:content>
<asp:content ID="OrderDetailBody" ContentPlaceHolderID="BodyContent" Runat="Server">
<table style="width: 100%;">
    <tr>
        <td colspan="4">
            <eoi:orderdetailmenu id="OrderDetailMenu" runat="server" />
        </td>
    </tr>
..............

Inside the control, I use jQuery dialogs to display nested user controls:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="OrderDetailMenu.ascx.cs" Inherits="Controls_OrderDetailMenu" %>
<%@ register src="~/Controls/UserComments.ascx" tagprefix="eoi" tagname="UserComments" %>
<%@ register src="~/Controls/OrderComments.ascx" tagprefix="eoi" tagname="OrderComments" %>

<script type="text/javascript">
$(document).ready(function()
{
    //init dialog
    $("#userCommentsPanel").dialog({
        title: "Add User Comment",
        height: 300,
        width: 700,
        autoOpen: false,
        show: "puff",
        hide: "puff", 
        buttons: [
            {
                text: "Close Window",
                click: function()
                {
                    $(this).dialog("close");
                }
            }
        ]
    });

    //popup link event
    $("#addUserCommentsLink").click(function(e)
    {
        $("#userCommentsPanel").dialog("open");
        e.preventDefault();
        return false;
    });
});
</script>
<table border="0" cellpadding="2" cellspacing="3">
<tr>
    <td>
        <a href="#" id="addUserCommentsLink" name="addUserCommentsLink">
            Add User Comment
        </a>
    </td>
</tr>
</table>
<asp:panel id="userCommentsPanel" clientidmode="Static" runat="server">
<div class="userCommentsPopup">
    <eoi:usercomments id="UserComments" runat="server" />
</div>
</asp:panel>

Inside the nested controls are simple forms, like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UserComments.ascx.cs" Inherits="Controls_UserComments" %>
<table style="width:100%;" id="userCommentsFormTable" runat="server">
<tr>
    <td width="1%">&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td colspan="2">
        <asp:validationsummary id="userCommentsSummary" runat="server" cssclass="validation" ShowModelStateErrors="true" />
    </td>
</tr>
<tr>
    <td>
        <asp:textbox id="commentsBox" runat="server" columns="80" rows="5" textmode="MultiLine"></asp:textbox>
    </td>
    <td>&nbsp;</td>
</tr>
<tr>
    <td align="right">
        <asp:button id="commentsButton" runat="server" text="Save" onclick="commentsButton_Click" />
    </td>
    <td>&nbsp;</td>
</tr>
</table>

...event handler:

    protected void commentsButton_Click(object sender, EventArgs e)
{
        //this method is never executed. :(
}

Page_Load fires but the button click event does not...nothing happens at all. What's happening here? Breakpoints aren't ever hit, either. It's as if the event does nothing. I'm sure it has something to do with page lifecycle ugliness, but I'm not able to find a fix out there in Googleland.

Thanks!

Answer 1

I finally found the solution here:

jQuery UI Dialog(Modal), prevents any postback

By simply adding this cryptic line of code after the dialog declaration:

$("#userCommentsPanel").parent().appendTo(jQuery("form:first"));

...it just works.