Динамическое добавление и обновление элементов в виджет Accordion в пользовательском интерфейсе jQuery

Несколько questions здесь, на ссылке SO, ссылка открыть запрос функции jQuery UI для возможности динамического добавления/удаления панелей из виджета Accordion. Сам билет отмечен (закрытая функция: исправлена) и из того, что я могу сказать из модульных тестов, и вытащить из своего репозитория Git он, кажется, реализован в последней версии.

Однако, если я попытаюсь добавить div, как это было в unit test выше:

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

Я не могу заставить его работать.

Однако этот метод работает:

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

Но я не хочу "разрушать" аккордеон, я просто хочу добавить (или добавить) элемент и обновить его.

Глядя на div, добавленный в инспекторе Chrome, показано, что элемент, который я добавил, не имеет того же стиля CSS, который добавлен в качестве остальной части аккордеона:

Ответ 1

unibasil правильно, что jQuery UI 1.10.0 обновил метод refresh, чтобы позволить это поведение.

Здесь 1.10.0 журнал изменений отмечает обновление.

Теперь метод обновления распознает панели, которые были добавлены или удален. Это придает гармонии в соответствии с вкладками и другими виджетами которые анализируют разметку, чтобы найти изменения.

Настройка

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

Javascript

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

Пример

jsFiddle, показывающий, что вы можете добавлять новые аккордеоны на лету без необходимости уничтожать старый.

Ответ 2

Благодаря Jarek! В моем случае это функциональность без включения div. Div приводит к созданию следующего аккордеона.

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});

Ответ 3

Фактически обсуждаемое поведение было включено в jQuery UI 1.10.0 (просто выпущено) и отлично работает для меня.