jQuery Accordion ajoute dynamiquement plus de sections?

Question

Sur mon ASP.net MVC 3.0 J'ai une vue regarde dans ce que j'ai une section de code

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

Le balisage HTML généré pour le code ci-dessus ressemblera à ceci

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

Script J'ai sur ma page est comme ce

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

Chaque fois que si vous cliquez sur Ajouter un lien est il ajoute une autre h3/section div avec dans le secteur principal section de cordion comme soufflet

<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> 

Mon problème est. lorsque vous cliquez sur le lien , il passe par trois étapes.

1)Destroy accordion 

2)Recreate Accordion 

3)Add New H3/Div 

Je ne veux pas de cette façon

Je veux est de suivre cet ordre

1) destroy accordion 

2) Add new h3/div to the block 

3) Recreate Accordion 

Quelqu'un peut-il me aider à corriger cela dans ma besace

$("#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"); 
}