динамический JQuery mobile accordion

Question

При попытке создать динамический аккордеон с jquery я не могу понять, почему отдельные элементы не рухнули. Они просто появляются как текст, а не влияют на эффект аккордеона. Может ли кто-нибудь заметить мою ошибку? (Предположим, что переменные данные все содержат данные)

редактировать: Я просто попытался его в Firefox вместо хрома ради любопытства и поведения аккордеон works..I не получить его

var outdiv = $('<div data-role="collapsible-set"></div>'); 

for(var i=0; i<data.length; i++){ 

    var innerdiv = $('<div data-role="collapsible" data-collapsed="true" ></div>'); 
    innerdiv.append('<h3>' + 'Tweet #' + i + '</h3>'); 
    innerdiv.append('<p>' + data[i].text + '</p>'); 

    outdiv.append(innerdiv); 

    outdiv.appendTo('#output'); 


} 

Answer 1

Вы должны вызвать collapsibleset() метод на ваш outdiv

$('#output [data-role=collapsible-set]').collapsibleset(); 

Работа jsFiddle здесь

Answer 2

Я не пользователь мобильных jQuery, но мне кажется, что вам нужно настроить поведение для вашего добавленного контента, что-то вроде $('#output').trigger('create') после вашего цикла.

Его обсуждали более here

Answer 3

Я не знаю, если вы можете выбрать весь элемент так или нет, но вы также можете использовать JQuery-х Attribute Contains Selector

//So your outdiv would become 
var outdiv = $('div[data-role*="collapsible-set"]'); 

//And then innerdiv, something like 
var innerdiv = $('div[data-role*="collapsible"][data-collapsed*="true"]'); 

Answer 4

Изменить код:

outdiv.append(innerdiv).collapsibleset("refresh"); 

Вы должны загрузить JQuery Mobile версии 1.3.2.