我在div中创建了一个按钮。div定义为:
<div id="popupdiv"title="Basic modal dialog" style="display: none" >
在这个div中,我有一个asp按钮。当我单击按钮时,它不会在代码后面调用onClick事件。但如果我删除style="display:none",它就可以工作了。我的代码是:
<%@ 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 be Blank">
</asp:RequiredFieldValidator>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </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> </td>
<td>
<asp:RequiredFieldValidator ID="AddDepartnameRequired"
runat="server" ControlToValidate="AddDepartmentTextBox"
ForeColor="Red" ErrorMessage="Can't be 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> </td>
<td> </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> </td>
<td>
<asp:RequiredFieldValidator ID="AddContactValidator"
runat="server" ControlToValidate="AddDeptContactNoTextBox"
ForeColor="Red" ErrorMessage="Can't be 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> </td>
<td>
<asp:RegularExpressionValidator ID="AddEmailCompareValidator"
runat="server" ControlToValidate="AddDeptEmailTextBox"
ForeColor="Red" ErrorMessage="Must be like 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> </td>
<td> </td>
</tr>
<tr>
<td> </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>
如何解决此问题?
谢谢。
第31行的孤立<div>
标记是怎么回事?
你确定你已经粘贴了完整的标记吗?
同样,为什么第30行的注释是<!-- <form id="form1">-->
?您有不止一个<form runat="server">
元素吗?
更新:
只需如下修改对话框初始化:
$('#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"));
});
这个display:none
不仅隐藏了<div>
,而且页面的行为就像没有一样。如果只想隐藏<div>
,请使用visibility:hidden
。