Jquery mobile JQM：动态嵌套可折叠文件-$（可折叠）.collapsable（）&$（可折叠）.触发器（'；创建'；）

我是JQM新手，但我读过很多博客和文档，但这些知识对我没有帮助。我已经读到了。使用我在create事件上看到的示例，效果很好。但当我试图编码时，它似乎不起作用

我在扩展时动态地将collapsebes注入DOM。请有人指出我做错了什么。对于me$（可折叠）.collapsable（）&$（可折叠）.trigger（'create'）在单击按钮时不起作用。div被添加到标记中，但没有可折叠的样式

在$（document）.ready函数上调用时，相同的函数也能正常工作。但是我有很多数据，不能把那件事的一切都记录下来

在document.ready上尝试的代码片段：

$(document).ready(function () {
    // Delete the existing content, if any
    $('#tdDynamic').empty();

    // Append a new collapsible and store it into a JQuery object
    $('#tdDynamic').html('<div id="collapsible" data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c"></div>');

    // Append the list header and store it into a JQuery object
    $('#collapsible').html('<h3>NAME of a person</h3>');

    $('#collapsible').append('<div id="collapse1"  data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false">'
                            + '<h3>Im a nested collapsible with a child collapsible</h3>'
                            + '<p>Im a child collapsible.</p>'
                        + '</div>');

    $('#collapse1').append('<div id="collapse2" data-role="collapsible" data-theme="d" data-content-theme="d" data-collapsed="false">'
                             + '<h3>Nested inside again.</h3>'
                              + '<p>Three levels deep now.</p>'
                            + '</div>');

    $('#collapse1').collapsible();
    $('#collapse2').collapsible();
    $('#collapsible').collapsible();
});

$（文档）.ready（函数（）{
//删除现有内容（如果有）
$（'#tdDynamic'）.empty（）；
//附加一个新的可折叠对象并将其存储到JQuery对象中
$（'#tdDynamic'）.html（''）；
//附加列表头并将其存储到JQuery对象中
$（'#collapsable'）.html（'人名'）；
$（'#可折叠'）。附加（''
+“我是一个嵌套的可折叠对象，有一个子可折叠对象”
+“我是一个可折叠的孩子。
”
+ '');
$（'#collapse1'）。追加（''
+“又在里面嵌套了。”
+“现在有三层了。
”
+ '');
$（'#collapse1'）。可折叠（）；
$（'#collapse2'）。可折叠（）；
$（“#可折叠”）。可折叠（）；
});

以下是一个片段：

$(document).on('click', '#btnSort', function () {
$('#tdDynamic').empty();
var pg = $('#ddlPG option:selected').text();
var ch = $('#ddlCH option:selected').text();
var so = $('#ddlSO option:selected').text();
var ae = $('#ddlAE option:selected').text();
var dt = $('#txtSDate').val();
var format = "";
if ($('#radio-choice-0a').is(':checked')) format = "M";
else format = "D";

var data = ExecuteSynchronously('../WebService.asmx'
, 'Get_SalesReport_Apk', { userCode: 1, level: '', channel: ch
, programme: pg, salesoffice: so, accexec: ae, dateFormat: format, date: dt });
//window.ChDataLoader.getSalesSeaarch_WBS('', ch, pg, so, ae, format, dt);
//$('#tdDynamic').append(data);
if (data.d != "" && data.d != null) {
    var arrList = data.d.split('^');
    for (var i = 0; i < arrList.length; i++) {
        var arr = arrList[i].split('#');
        var Programme = arr[0];

        var arr2 = arr[1].split('><');
        var revenue = arr2[0];
        var time = arr2[1];

        // Append a new collapsible and store it into a JQuery object                   
        $('#tdDynamic').append('<div id="collapsible_PG' 
        + i + '" data-role="collapsible" data-collapsed="true"'
        +' data-theme="e" data-content-theme="c"'
                              + ' ></div>');

        // Append the list header and store it into a JQuery object
        var collapsible = $('#collapsible_PG' + i);

        collapsible.append('<h3 id="h3Text_PG'
        + i + '">' + Programme + '~&nbsp;' 
        + time + '&nbsp;~&nbsp;' + revenue + '</h3>');
        //var h3Text = $('#h3Text' + i);

        var h3Text_PG = $('#h3Text_PG' + i);
        h3Text_PG.bind('expand', onexpand);
        h3Text_PG.bind('collapse', oncollapse);
        collapsible.collapsible();
    }
}

});

function oncollapse(event) {
//alert(event.target.id);
}

function onexpand(event) {                    
//alert(event.target.id);
//$('#'+event.target.id).empty();
var arrPGName = $(event.target).text().split('~');
var pg = arrPGName[0];
var ch = $('#ddlCH option:selected').text();
var so = $('#ddlSO option:selected').text();
var ae = $('#ddlAE option:selected').text();
var dt = $('#txtSDate').val();
var format = "";
if ($('#radio-choice-0a').is(':checked')) format = "M";
else format = "D";

var dataso = ExecuteSynchronously('../WebService.asmx'
, 'Get_SalesReport_Apk'
, { userCode: 1, level: 'SO', channel: ch, programme: pg
, salesoffice: so, accexec: ae, dateFormat: format, date: dt });
//window.ChDataLoader.getSalesSeaarch_WBS('', ch, pg, so, ae, format, dt);
//$('#tdDynamic').append(data);

if (dataso.d != "" && dataso.d != null) {
    //$('#' + event.target.id).remove();
    var arrList = dataso.d.split('^');
    //alert(arrList.length);
    for (var i = 0; i < arrList.length; i++) {
        var arr = arrList[i].split('#');
        var SO = arr[0];

        var arr2 = arr[1].split('><');
        var revenue = arr2[0];
        var time = arr2[1];
        //alert(event.target.id);
        // Append a new collapsible and store it into a JQuery object                   
        $('<div id="collapsible_SO' + i 
        + '" data-role="collapsible" data-collapsed="true"'
        +' data-theme="e" data-content-theme="c"'
        + ' ></div>').appendTo('#' +event.target.id);

        // Append the list header and store it into a JQuery object
        var collapsible = $('#collapsible_SO' + i);

        $('<h3 id="h3Text_SO' + i + '">' + SO 
        + '&nbsp;&nbsp;&nbsp;' + time + '&nbsp;&nbsp;&nbsp;' 
        + revenue + '</h3>').appendTo('#collapsible_SO' + i);
        //var h3Text = $('#h3Text' + i);

        var h3Text_SO = $('#h3Text_SO' + i);
        h3Text_SO.bind('expand', onexpand_SO);                            
    }
    $('#'+event.target.id).trigger('create');
    //$('#page1').trigger('create');
}

}

function onexpand_SO(event) {
$('#'+ event.target.id).collapsible();
//alert($(event.target).text());
}

$（文档）。在（'click'，'b传感器'，函数（）{
$（'#tdDynamic'）.empty（）；
var pg=$（“#ddlPG选项：选定”）.text（）；
var ch=$（'#ddlCH选项：选定'）。text（）；
var so=$（'#ddlSO选项：选定'）。text（）；
var ae=$（'#ddlAE选项：选定'）。text（）；
var dt=$（'#txtSDate'）.val（）；
var format=“”；
if（$（'#radio-choice-0a'）。是（':checked'））format=“M”；
else format=“D”；
var data=ExecuteSynchronously（“../WebService.asmx”
，'Get_SalesReport_Apk'，{用户代码：1，级别：''，通道：ch
，program:pg，salessoffice:so，accexec:ae，dateFormat:format，date:dt}）；
//window.ChDataLoader.getSaleseArch_WBS（“”，ch，pg，so，ae，format，dt）；
//$（'#tdDynamic'）。追加（数据）；
if（data.d！=“和&data.d！=null）{
var arrList=data.d.split（'^'）；
对于（变量i=0；ivar arr2=arr[1].split（'>我通过附加到
.appendTo（'#'+event.target.id+'ui-collaxible-content'）；
在互联网上做了大量研究后发现了这个问题。我是jquery mobile的noob。
<div class="ui-collapsible-content ui-body-c" aria-hidden="false">
</div>
<div id="collapsible_SO0" data-role="collapsible" 
data-collapsed="false" data-theme="e" data-content-theme="c">
<h3 id="h3Text_SO0">Bengaluru</h3></div>
<div id="collapsible_SO1" data-role="collapsible"
data-collapsed="false" data-theme="e" data-content-theme="c">
<h3 id="h3Text_SO1">Delhi</h3></div>
<div id="collapsible_SO2" data-role="collapsible"
data-collapsed="false" data-theme="e" data-content-theme="c">
<h3 id="h3Text_SO2">Kolkata</h3></div>
<div id="collapsible_SO3" data-role="collapsible"
data-collapsed="false" data-theme="e" data-content-theme="c">
<h3 id="h3Text_SO3">Mumbai</h3></div>