ajax 使用 jquery 将项目添加到 jQuery Accordion
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/910645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add items to a jQuery Accordion with jquery
提问by espenhogbakk
I am using the jQuery accordion plugin to make an accordion of some data. Then I want the user to be able to add more data to the accordian. I have setup the accordion to function properly, then I've made a function that prepends a "list item" to the accordion that matches the accordion semantics.
我正在使用 jQuery 手风琴插件来制作一些数据的手风琴。然后我希望用户能够向手风琴添加更多数据。我已将手风琴设置为正常运行，然后我创建了一个函数，该函数在与手风琴语义匹配的手风琴前添加“列表项”。
Is it possible to "update" the accordion so that it works with the newly added element, without saving the new data to database and refreshing the page?
是否可以“更新”手风琴使其与新添加的元素一起使用，而无需将新数据保存到数据库并刷新页面？
Something like this:
像这样的东西：
.accordion('refresh')
Or something like the live event added in jQuery 1.3, anybody got a clue?
或者像jQuery 1.3中添加的实时事件，有人知道吗？
回答by Jimmy Stenke
I haven't tested it, but this should probably work: Say that you have your accordion with id #accordion
我还没有测试过，但这应该可以工作：假设你有你的手风琴，id #accordion
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
.accordion('destroy').accordion();
Basically, just destroy and re-create the accordion.
基本上，只需销毁并重新创建手风琴即可。
UPDATE:
更新：
Since this answer was written a refresh() method has been added to the accordion widget. It can be invoked by calling:
由于编写了此答案，因此已将 refresh() 方法添加到手风琴小部件中。它可以通过调用来调用：
$( ".selector" ).accordion( "refresh" );
You can read more about this method here
您可以在此处阅读有关此方法的更多信息
回答by Wesley
To add a new section, and keep the old one active:
要添加新部分，并保持旧部分处于活动状态：
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});
回答by Mark D.
As mentioned above by Shahzad, jQuery UI 1.10 has made this easier; see the documentation.
正如 Shahzad 上面提到的，jQuery UI 1.10 使这变得更容易；请参阅文档。
回答by Tak0r
Since i needed a working add/edit/delete vor accordion items i hacked this little javascript functions for this purpose
因为我需要一个有效的添加/编辑/删除 vor 手风琴项目，我为此目的破解了这个小 javascript 函数
h3 and div need an unique id which goes by the following convention
h3 和 div 需要一个唯一的 id，它遵循以下约定
<h3 id="divname_hitm_<uniquenumber>"><h3>
the corresponding div need the following
相应的 div 需要以下内容
<div id="divname_ditm_<samenumber as h3"></div>
sample accordion code block
示例手风琴代码块
<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>
have fun maybe it helps some ppl out there!
玩得开心也许它可以帮助一些人！
回答by jfrobishow
You might want to look at the LiveQuery plugin: http://plugins.jquery.com/project/livequery
您可能想查看 LiveQuery 插件：http://plugins.jquery.com/project/livequery
It allows you to add events and binding after the DOM is loaded.
它允许您在加载 DOM 后添加事件和绑定。
