jQuery Accordion динамически добавлять больше разделов? - PullRequest
Новая
       21

jQuery Accordion динамически добавлять больше разделов?

1 голос
/ 13 октября 2011

На моем 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");
});

Каждый раз, когда нажимается ссылка «Добавить», добавляется еще один раздел h3 / div в разделе основного аккордеона, как показано ниже. 

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

1 Ответ

0 голосов
/ 13 октября 2011 
@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");
}
...