在jQuery UI中向Accordion小部件动态添加和刷新元素

Question

Several questions在此处引用此open jQuery UI feature request，以便能够从Accordion小部件动态添加/删除面板。票证本身已标记（已关闭的功能：已修复），而且我可以从unit tests中查看，并且从他们的Git存储库中获取它似乎将在最新版本中实现。

但是，如果我尝试像上面的单元测试中那样添加div：

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

我无法让它发挥作用。

然而this method有效：

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

但是我不想“摧毁”手风琴，我只想追加（或前置）一个元素并刷新它。

看看我在Chrome的检查器中添加的div显示我添加的元素没有添加与手风琴其他部分相同的CSS样式：

Answer 1

unibasil是正确的，jQuery UI 1.10.0已更新refresh方法，现在允许此行为。

以下是有关更新的1.10.0 changelog注释。

  

现在，刷新方法将识别已添加的面板或   除去。这使得手风琴与标签和其他小部件一致   解析标记以查找更改。

<强>设置

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

<强>的Javascript

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

示例

jsFiddle 表示您可以动态添加新手风琴，而不必销毁旧手风琴。

Answer 2

感谢Jarek！ 在我的情况下它是功能而没有封闭div。 div导致创造下一个手风琴。

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});    

Answer 3

实际上讨论过的行为包含在jQuery UI 1.10.0（只是released）中，对我来说很好。