jqueryMobile 和 phonegap pageinit 和 ajax 手风琴答案

【问题标题】：jqueryMobile and phonegap pageinit and ajax accordionjqueryMobile 和 phonegap pageinit 和 ajax 手风琴
【发布时间】：2012-04-07 07:00:56
【问题描述】：

我的代码：

$('#cars').live('pageinit',function() {
    var msg = "";
    $.ajax({
        url: 'http://192.168.23.20/php/getcar.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',  
        success: function(data){
        msg += '<div data-role="collapsible-set">';
            $.each(data, function(i,v){
                msg += '<div data-role="collapsible">';
                msg += '<h3>'+v.carName+'</h3>';
                msg += '<p>'+v.cardesc+'</p>';
                msg += '</div>';
            });
        msg += '</div>';
        $(".car").after(msg);
        }
    });         
});

输出显示为纯文本而不是 JQM 手风琴。有什么解决方法可以在 pageinit 上做 JQM 手风琴吗？

【问题讨论】：

标签： jquery jquery-mobile cordova

【解决方案1】：

如果您要动态创建手风琴列表或动态修改，那么您需要刷新特定的手风琴以获得 JQM 样式和效果，您可以通过 $('.selector').collapsibleset('refresh'); 实现

可能这个（未经测试）对你有用。

$accordion_div = $('<div data-role="collapsible-set"></div>');
msg = ""
$.each(data, function(i,v){
  msg += '<div data-role="collapsible">';
  msg += '<h3>'+v.carName+'</h3>';
  msg += '<p>'+v.cardesc+'</p>';
  msg += '</div>';
});
$accordion_div.html(msg);
$accordion_div.appendTo(".car").collapsibleset('refresh');

【讨论】：