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

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

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

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

.accordion('refresh')

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

Ответы

Ответ 1

Я не тестировал его, но это, вероятно, должно работать: Скажите, что у вас есть ваш аккордеон с id #accordion

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

В принципе, просто уничтожьте и заново создайте аккордеон.

UPDATE:

Поскольку этот ответ был написан, в виджет аккордеона был добавлен метод refresh(). Его можно вызвать, вызвав:

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

Подробнее об этом методе можно узнать

Ответ 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});

Ответ 3

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

Ответ 4

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

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

Ответ 5

Поскольку мне нужны рабочие элементы добавления/редактирования/удаления vor аккордеона, я взломал эти маленькие функции 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>

получайте удовольствие, возможно, это поможет некоторым ppl там!