jquery-mobile - JQM: 動的にネストされた折りたたみ可能 - $(collapsible).collapsible() & $(collapsible).trigger('create')

Question

私は JQM を初めて使用しますが、かなりの数のブログやドキュメントを読みましたが、この知識はここでは役に立ちません。page create vs refresh eventsについて読みました。私がjsfiddleで見た例では、作成イベントは正常に機能します。しかし、コーディングしようとすると、うまくいかないようです。

展開時に折りたたみをDOMに動的に挿入しています。誰かが私が間違っていることを指摘してください。私にとって $(collapsible).collapsible() & $(collapsible).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>

ページは次のようになります。