按下按钮时，按钮onClick事件未执行 <div> 标签被点击

Question

我在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>&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 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>&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 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>&nbsp;</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>&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>

我该如何解决？

谢谢。

Answer 1

第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"));
});

Answer 2

此display:none不仅隐藏<div> ，而且页面的行为就像没有它一样。 如果只想隐藏<div>请使用visibility:hidden 。