jquery - Button onClick event is not executing when button in tag is clicked -

jquery - Button onClick event is not executing when button in <div> tag is clicked -

i have created button in div. div defined as:

<div id="popupdiv"title="basic modal dialog" style="display: none" >

in div have asp button. when click button doesn't phone call onclick event in code behind. if remove style="display: none" works. code is:

<%@ page title="" language="c#" masterpagefile="~/site.master" autoeventwireup="true" codebehind="department.aspx.cs" inherits="projectmfrp.department" %> <asp:content id="content1" contentplaceholderid="headcontent" runat="server"> <!--for jquery--> <title>ad department</title> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js> </script> <script type="text/javascript"> $(function () { $('#btnclick').click(function () { $("#popupdiv").dialog({ title: "add department", width: 430, height: 450, modal: true, buttons: { close: function () { $(this).dialog('close'); } } }); }); }) </script> <!-- *******************************************************--> </asp:content> <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <!--*************for jquery*********************--> <!-- <form id="form1">--> <div> <div id="popupdiv"title="basic modal dialog" style="display: none" > <table> <tr> <td> <asp:requiredfieldvalidator id="emailrequiredvalidator" runat="server" controltovalidate="adddeptemailtextbox" forecolor="red" errormessage="email can't blank"> </asp:requiredfieldvalidator> </td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td> <asp:label id="adddepartmentnamelabel" runat="server" text="department name"> </asp:label> </td> <td> <asp:textbox id="adddepartmenttextbox" runat="server"> </asp:textbox> </td> </tr> <tr> <td>&nbsp;</td> <td> <asp:requiredfieldvalidator id="adddepartnamerequired" runat="server" controltovalidate="adddepartmenttextbox" forecolor="red" errormessage="can't blank"> </asp:requiredfieldvalidator> </td> </tr> <tr> <td> <asp:label id="addreportingmanager" runat="server" text="reporting manager"> </asp:label> </td> <td> <asp:dropdownlist id="addreportingmanagerddl" runat="server"> </asp:dropdownlist> </td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td> <asp:label id="adddeptcontactnolabel" runat="server" text="contact number"> </asp:label> </td> <td> <asp:textbox id="adddeptcontactnotextbox" runat="server"> </asp:textbox> </td> </tr> <tr> <td>&nbsp;</td> <td> <asp:requiredfieldvalidator id="addcontactvalidator" runat="server" controltovalidate="adddeptcontactnotextbox" forecolor="red" errormessage="can't blank"> </asp:requiredfieldvalidator> </td> </tr> <tr> <td> <asp:label id="addemaillabel" runat="server" text="email"> </asp:label> </td> <td> <asp:textbox id="adddeptemailtextbox" runat="server"> </asp:textbox> </td> </tr> <tr> <td>&nbsp;</td> <td> <asp:regularexpressionvalidator id="addemailcomparevalidator" runat="server" controltovalidate="adddeptemailtextbox" forecolor="red" errormessage="must abc@def.com" validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </asp:regularexpressionvalidator> </td> </tr> <tr> <td> <asp:label id="adddeptinfolabel" runat="server" text="department information"> </asp:label> </td> <td> <asp:textbox id="adddeptinfotextbox" runat="server" > </asp:textbox> </td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td> <asp:button id="adddepartmentbutton" runat="server" text="save" onclick="adddepartmentbutton_click" /> </td> </tr> </table> </div> <table align="right"> <tr> <td> <asp:label id="adddepartmentlabel" runat="server" text="add new department"> </asp:label> </td> <td><input type="button" id="btnclick" value="+" /></td> </tr> </table> </div> <!--</form>--> <!--*************for jquery*********************--> <asp:gridview id="viewdepartmentgridview" runat="server" width="100%" allowpaging="true" autogeneratedeletebutton="true" autogenerateeditbutton="true" onrowcancelingedit="viewdepartmentgridview_rowcancelingedit" onrowdeleting="viewdepartmentgridview_rowdeleting" onrowediting="viewdepartmentgridview_rowediting" onrowupdating="viewdepartmentgridview_rowupdating"> </asp:gridview> </asp:content>

how resolve this?

thank you.

what's orphan <div> tag on line 31?

are sure you've pasted total markup?

also, why comment <!-- <form id="form1">--> on line 30? have more 1 <form runat="server"> element?

updated:

just modify dialog initialization follows:

$('#btnclick').click(function () { var popup = $("#popupdiv").dialog({ title: "add department", width: 430, height: 450, modal: true, buttons: { close: function () { $(this).dialog('close'); } } }); popup.parent().appendto($("form:first")); });

jquery html css asp.net