Question

我想在我的ASP.NEt Appliacation中使用jQuery Accordion并且它有效但是如果我点击手风琴中的按钮然后我的手风琴删除:(这里我的代码和两个坑......

ASPX：

<link href="App_Theme/mainStyle.css" type="text/css" rel="Stylesheet" />
    <script src="Scripte/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="Scripte/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <link href="App_Theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" language="javascript">

        $(document).ready(function () {
            $("#accordion").accordion();

        });

    </script>

</head>
<body>
    <form id="form1" runat="server">

    <asp:ToolkitScriptManager ID="manager" runat="server"></asp:ToolkitScriptManager>
    <asp:UpdatePanel ID="update" runat="server">
    <ContentTemplate>

    <div id="accordion">
            <h3><a href="#"><asp:Label ID="lblAbwesenheit" runat="server"/></a></h3>
            <div>
                 <asp:Panel runat="server" ID="pn1" DefaultButton="btnAbwesenheitErzeugen">
                            <div id="Angaben" runat="server">

                            <table id="Angabentabelle" runat="server">

                                <tr>
                                <td><asp:Label ID="lblAbwesenheitBis" runat="server" /></td><td><asp:TextBox ID="txtAbwesenheitBis" runat="server" Enabled="false"></asp:TextBox>
                                <asp:ImageButton Width="20px" Height="20px" ID="imgbtnAbwesenheitBis" runat="server" ToolTip="Abwesenheit bis..." ImageUrl="~/App_Theme/Calender.ico"  />
                                <asp:CalendarExtender ID="AbwesenheitBis" runat="server" TargetControlID="txtAbwesenheitBis"
                                 Format="dd.MM.yyyy" PopupButtonID="imgbtnAbwesenheitBis"></asp:CalendarExtender>
                                </td>
                                </tr>

                                <tr>
                                <td><asp:Label ID="lblVertreter" runat="server" /></td>
                                <td>
                                <asp:TextBox ID="txtVertreter" runat="server"></asp:TextBox>
                                <asp:AutoCompleteExtender ID="AutoComlete" runat="server" TargetControlID="txtVertreter" 
                                ServiceMethod="GetCompletionList" ServicePath="" Enabled="true"
                                DelimiterCharacters="" UseContextKey="true" MinimumPrefixLength="1" ></asp:AutoCompleteExtender>
                                (Suche nach Nachname)
                                </td>

                                </tr>
                            </table>

                                <asp:Button ID="btnAbwesenheitErzeugen" runat="server" Text="Erzeugen" OnClick="btnAbwesenheitErzeugen_Click" />
                                <br />
                            <br />

                            </div>

                            <HTMLEditor:Editor ID="htmlEditAbwesenheit" runat="server" Content="<% %>" />

                            </asp:Panel>
            </div>
            <h3><a href="#"><asp:Label ID="lblSignatur" runat="server" /></a></h3>
            <div>
               <HTMLEditor:Editor ID="htmlEditSignatur" runat="server" Content="<% %>" />
            </div>
        </div>

如果我启动我的页面，我会看到：

enter image description here

如果我点击按钮，那么我会看到......

enter image description here

为什么我的手风琴会移除？

Answer 1

这是因为您的手风琴位于更新面板内。回发后，updatepanel中的所有内容都将从DOM中删除并重新读取。因此，手风琴的DOM元素消失了。你需要打电话：$（“＃accordion”）。accordion（）;你的回发后。

你可以这样做的一种方法是：

<script type="text/javascript" language="javascript">
   function SetupAccordion(){
        $("#accordion").accordion();
   }
   $(document).ready(function () {
     SetupAccordion();
     if (typeof Sys.WebForms != 'undefined') {
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(SetupAccordion);
     }
   });   
</script>

为什么我的jQuery手风琴在点击按钮后删除？

1 个答案: