DropDownList selected index changed Event doesn't fire inside jQuery dialog

DropDownList selected index changed Event doesn't fire inside jQuery dialog

I need to update my second drop down list from database according to the
value selected from first drop down list in the Jquery dialog.
ASPX
<asp:UpdatePanel ID="upnl" OnLoad="upnl_Load" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<div id="dv" style="display: none;" title="Tile">
<table>
<tr>
<td>Parent</td>
<td>
<asp:DropDownList ID="ddlDialog1" runat="server" /></td>
</tr>
<tr>
<td>Child</td>
<td>
<asp:DropDownList ID="ddlDialog2" runat="server" /></td>
</tr>
</table>
</div >
</ContentTemplate>
</asp:UpdatePanel>
JQuery
function ShowDialog() {
jQuery(document).ready(function () {
$("#dv").dialog({
draggable: true,
modal: true,
width: 500,
height: 400
});
});
}
jQuery(document).ready(function () {
$("#<%= ddlDialog1.ClientID %>").change(function () {
//This doesn't fire
__doPostBack('<%= upnl.ClientID %>', "DialogOnChange");
});
});
Code behind
protected void upnl_Load(object sender, EventArgs e)
{
if (arg.ToString().IndexOf("DialogOnChange") > -1)
{
// Here ddlDialog1.SelectedValue is always " ", Even I get a data set
of values,ddlDialog2 is not populated with new values
ddlDialog2.DataSource = objMngr.GetData(ddlDialog1.SelectedValue);
ddlDialog2.DataValueField = "Id";
ddlDialog2.DataTextField = "name";
ddlDialog2.DataBind();
}
upnl.Update();
}
Problem here is, change function doesn't fire when I select different
values from first drop down list(ddlDialog1).
Any idea?