jQuery Accordion動態添加更多節？

Question

在我的ASP.net MVC 3.0 我有一個觀點看起來，我有代碼

<div id="accordion"> 
    @Html.Action("Action", "Controller") 
</div> 

@Ajax.ActionLink("Add Another Content", "Action", "Controller", new AjaxOptions 
{ 
UpdateTargetId = "accordion", 
InsertionMode = InsertionMode.InsertAfter, 
HttpMethod = "POST" 
}, new { @class = "standard button", id = "AddAnother" }) 

一節生成的HTML標記上面的代碼看起來像這樣

<div id="accordion"> 
<h3><a href="#"> Title</a> </h3> 
<div> Body Content </div> 
</div> 
<a href="Add" id="AddAnother"> Add</a> 

腳本我在我的頁面上是這樣的

$("#AddAnother").click(function() { 
    $("#accordion").accordion('destroy'); 
     $("#accordion").accordion(); 
     $("#accordion").accordion("option", "active", ":last"); 
}); 

每次點擊添加鏈接時，它會在主要ac中添加另一個h3/div部分cordion section作爲波紋管

<div id="accordion"> 

<h3><a href="#"> Title</a> </h3> 
    <div> Body Content </div> 

<h3><a href="#"> Title</a> </h3> 
    <div> Body Content </div> 

<h3><a href="#"> Title</a> </h3> 
    <div> Body Content </div> 

</div> 

我的問題是。 何時添加鏈接點擊 它經歷了三個步驟。

1)Destroy accordion 

2)Recreate Accordion 

3)Add New H3/Div 

我不想這樣

我要的就是按照這個順序

1) destroy accordion 

2) Add new h3/div to the block 

3) Recreate Accordion 

任何一個可以幫助我在我的紙條來糾正這

$("#AddAnother").click(function() { 
    $("#accordion").accordion('destroy'); 
     $("#accordion").accordion(); 
     $("#accordion").accordion("option", "active", ":last"); 
}); 

Answer 1

@Ajax.ActionLink("Add Another Content", "Action", "Controller", new AjaxOptions 
{ 
    UpdateTargetId = "accordion", 
    InsertionMode = InsertionMode.InsertAfter, 
    HttpMethod = "POST", 
    OnBegin = "destroyAccordion", 
    OnSuccess = "createAccordion" 
}, new { @class = "standard button", id = "AddAnother" }) 

JS：

function destroyAccordion() { 
    $("#accordion").accordion('destroy'); 
} 

function createAccordion() { 
    $("#accordion").accordion(); 
    $("#accordion").accordion("option", "active", ":last"); 
}