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

Question

关于SO的几个问题引用了这个开放的jQuery UI功能请求,可以从Accordion小部件动态添加/删除面板.票证本身已标记(已关闭的功能:已修复),从我从单元测试中可以看出的内容以及来自其Git存储库的提示,它似乎在最新版本中实现.

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

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

我无法让它发挥作用.

但是这种方法有效:

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

但我不想"摧毁"手风琴,我只想追加(或前置)一个元素并刷新它.

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

Answer 1

unibasil是正确的,jQuery UI 1.10.0已更新刷新方法,现在允许此行为.

这是关于更新的1.10.0 更改日志说明.

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

建立

<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（刚刚发布）中，并且对我来说效果很好。