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();

基本上，只需破坏并重新制作手风琴。

<强>更新

由于编写了这个答案，因此在accordion小部件中添加了refresh（）方法。它可以通过调用：

来调用

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

您可以详细了解此方法here

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让这更容易;见the documentation。

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>

玩得开心也许它有助于一些人在那里！

使用jquery将项添加到jQuery Accordion

5 个答案: