ajax - 使用 jquery 将项目添加到 jQuery Accordion

Question

我正在使用 jQuery 手风琴插件来制作一些数据的手风琴。然后我希望用户能够向手风琴添加更多数据。我已经设置了手风琴以使其正常工作，然后我制作了一个函数，该函数将“列表项”添加到与手风琴语义匹配的手风琴前面。

是否可以“更新”手风琴使其与新添加的元素一起使用，而无需将新数据保存到数据库并刷新页面？

像这样的东西：

.accordion('refresh')

或者像 jQuery 1.3 中添加的现场事件，有人知道吗？

Answer 1

我还没有测试过，但这应该可以工作：假设你有你的手风琴，id 为#accordion

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

基本上，只需破坏并重新创建手风琴即可。

更新：

由于编写了此答案，因此已将 refresh() 方法添加到手风琴小部件中。它可以通过调用来调用：

$( ".selector" ).accordion( "refresh" );

您可以在此处阅读有关此方法的更多信息

Answer 2

要添加新部分并保持旧部分处于活动状态：

var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});

Answer 3

正如 Shahzad 上面提到的，jQuery UI 1.10 让这变得更容易了。请参阅文档。

Answer 4

您可能想查看 LiveQuery 插件：http ://plugins.jquery.com/project/livequery

它允许您在加载 DOM 后添加事件和绑定。

Answer 5

由于我需要一个有效的添加/编辑/删除 vor 手风琴项目，我为此目的破解了这个小 javascript 函数

http://jsfiddle.net/Sd6fC/

h3 和 div 需要一个唯一的 id，它遵循以下约定

<h3 id="divname_hitm_<uniquenumber>"><h3>

对应的div需要以下

<div id="divname_ditm_<samenumber as h3"></div>

示例手风琴代码块

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

玩得开心，也许它可以帮助一些人！