Добавление элементов в jQuery Accordion с помощью jquery

Question

Я использую плагин JQuery для аккордеона, чтобы сделать аккордеон из некоторых данных. Затем я хочу, чтобы пользователь мог добавить больше данных в аккордеон. Я настроил аккордеон для правильной работы, затем я сделал функцию, которая добавляет "элемент списка" к аккордеону, который соответствует семантике аккордеона.

Можно ли "обновить" аккордеон, чтобы он работал с вновь добавленным элементом, не сохраняя новые данные в базе данных и не обновляя страницу?

Что-то вроде этого:

.accordion('refresh')

Или что-то вроде живого события, добавленного в jQuery 1.3, кто-нибудь понял?

Answer 1

Я не проверял это, но это, вероятно, должно работать: скажем, что у вас есть аккордеон с идентификатором #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

Как упоминалось выше Шахзадом, jQuery UI 1.10 сделал это проще; см. документацию

Answer 4

Возможно, вы захотите взглянуть на плагин LiveQuery: http://plugins.jquery.com/project/livequery

Позволяет добавлять события и привязки после загрузки DOM.

Answer 5

Так как я нуждался в работающем добавлении / редактировании / удалении элементов аккордеона, я взломал эту маленькую функцию javascript для этой цели.

http://jsfiddle.net/Sd6fC/

h3 и div нужен уникальный идентификатор, который соответствует следующему соглашению

<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>

повеселиться может быть, это помогает некоторым людям там!