0

ASP.NET アプリケーションで jQuery アコーディオンを使用したいのですが、動作しますが、アコーディオンのボタンをクリックすると、アコーディオンが削除されます :( ここで私のコードと 2 つの図...

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>

ページを開始すると、次のように表示されます。

ここに画像の説明を入力

ボタンをクリックすると、それが表示されます...

ここに画像の説明を入力

なぜ私のアコーディオンは削除されますか?

4

1 に答える 1

2

それはあなたのアコーディオンがアップデートパネルの中にあるからです。ポストバックすると、updatepanel内のすべてがDOMから削除され、再追加されます。したがって、アコーディオンであったDOM要素はなくなります。次を呼び出す必要があります：$（ "＃accordion"）。accordion（）; あなたのポストバックの後。

あなたがそれをすることができる1つの方法はこれをすることです：

<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>
于 2012-09-14T12:54:56.543 に答える