Как получить динамический JQuery Mobile Accordion?

Question

Я пытался создать базовый читатель RSS-каналов, используя PhoneGap и JQuery Mobile. Сначала загружается страница, и для появления фидов требуется время. Я пытаюсь добавить аккордеон для каждого сообщения, чтобы пользователь мог увидеть заголовок сообщения и расширить сообщение, если он заинтересован. Это фрагмент кода я использовал:

for (var i = 0; i < result.feed.entries.length; i++) { 
    var entry = result.feed.entries[i]; 
    var title = entry.title, 
    link = entry.link, 
    description = entry.contentSnippet, 
    pubDate = entry.publishedDate; 
    feedItem = feedItem + '<div data-role="collapsible" data-theme="a" data-content-theme="a"><h3><a href="' + link + '>'; 
    feedItem = feedItem + '<span class="feeditemtitle">' + title + '</span>'; 
    feedItem = feedItem + '</a></h3>'; 
    feedItem = feedItem + '<h6>' + pubDate + '</h6>'; 
    feedItem = feedItem + '<p>' + description + '</p></div>'; 
} 

Я могу получить сообщения на странице, но нет аккордеона. Он отображает сообщения как обычный HTML. Я предполагаю, что это потому, что сообщения загружаются после страница загружается. Может ли кто-нибудь помочь мне в этом?

Answer 1

Вы должны обновления загруженного контента.

Предполагая, что добавляется к этому узлу <div id="loaded-content" data-role="collapsible-set"></div> вы должны сделать:

$('.loaded-content').collapsibleset('refresh'); 

Вы можете посмотреть на мою скрипку, которая эмулирует вызов Ajax и создать аккордеон с задержкой: http://jsfiddle.net/ooflorent/FkT8H/

Answer 2

for (var i = 0; i < result.feed.entries.length; i++) { 
    var entry = result.feed.entries[i]; 
    var title = entry.title, 
    link = entry.link, 
    description = entry.contentSnippet, 
    pubDate = entry.publishedDate; 
    feedItem = feedItem + '<div data-role="collapsible" class="accordItem" data-theme="a" data-content-theme="a"><h3><a href="' + link + '>'; 
    feedItem = feedItem + '<span class="feeditemtitle">' + title + '</span>'; 
    feedItem = feedItem + '</a></h3>'; 
    feedItem = feedItem + '<h6>' + pubDate + '</h6>'; 
    feedItem = feedItem + '<p>' + description + '</p></div>'; 
    if(i == result.feed.entries.length-1){ 
     $(".accordItem").collapsible(); 
    } 
}