JQM：动态嵌套可折叠 - $（可折叠）.collapsible（）＆amp; $（可折叠）.trigger（ '创建'）

Question

我是JQM的新手，但我已经阅读了不少博客和文档，但这些知识对我没有帮助。我读过page create vs refresh events。通过我在jsfiddle上看到的示例，create事件运行正常。但是当我尝试编码时，它似乎不起作用。

我在展开时动态地将collapsibes注入到DOM中。有人请指出我做错了什么。对我来说（可折叠）.collapsible（）＆amp;单击按钮时，$（可折叠）.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();
});

这是一个片段：

$(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());
}

当我做一个检查元素时，我发现可折叠物不会被注入 <div class="ui-collapsible-content ui-body-c" aria-hidden="false"></div>标记。相反，它们会在它之后附加。

<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>

页面如下所示：

Answer 1

我通过附加.appendTo('#' +event.target.id + ' ui-collapsible-content');找到了解决方法。