повторно инициализировать jquery аккордеон при обратном вызове

Question

У меня аккордеон отлично работает при загрузке страницы, однако при взаимодействии пользователя с некоторыми элементами на странице я использую ajax для перестройки HTML аккордеона. Затем я пытаюсь заново инициализировать аккордеон с помощью

    $('#accordion').accordion({
        active: false,
        autoHeight: false,
        clearStyle: true,
        collapsible: true,
        header: 'h3'
    });

но ... похоже, что это не так.

Новый блок визуализированного HTML не применяет правила аккордеона. Вместо этого он остается открытым как большой список.

Я даже пытался использовать setTimeout () для повторного вызова аккордеона, только в том случае, если он пытался инициализировать до того, как визуализированный HTML будет возвращен в обратном вызове.

HTML-код, отображаемый при обратном вызове, точно такой же, как и при загрузке страницы (за исключением дополнений DOM, возникающих при использовании метода Accordion)

Answer 1

Уничтожьте аккордеон перед тем, как его снова заполнить данными.

$('#accordion').accordion('destroy');

Answer 2

Для меня следующее прекрасно работает, и код очень ясен - запустите div аккордеона при загрузке страницы, используя:

$('#accordion').accordion()

Тогда при любом изменении я звоню:

$('#accordion').accordion( "refresh" )

---

Из Документов :

Обработайте любые заголовки и панели, которые были добавлены или удалены непосредственно в DOM, и пересчитайте высоту аккордеонных панелей. Результаты зависят от содержимого и параметра heightStyle.

Это работает для всех ситуаций: это означает, что вы можете использовать его после того, как добавили / удалили / изменили / воссоздали ваш контент, и элемент "accordion" перенастроится сам.

Вы должны избегать разрушения и создания всего при каждом изменении, это не имеет смысла, и производительность может ухудшиться при увеличении масштаба.