Question

在我的ASP.net MVC 3.0上我有一个View看起来我有一段代码

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

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

jQuery Accordion动态添加更多部分？

1 个答案: