JQM: Dynamic nested collapsibles - $(collapsible).collapsible() & $(collapsible).trigger('create') - jquery-mobile

Question

I am new with JQM, but I have read quite a few blogs and documentation but this knowledge is not helping me here. I have read about page create vs refresh events. With the examples I have seen on jsfiddle the create event works fine. But when I tried to code, it doesn't seem to work.
I am dynamically injecting collapsibes into the DOM on expand. Somebody please point out of what I'm doing wrong. For me $(collapsible).collapsible() & $(collapsible).trigger('create') do not work when done on button click. The div gets added to the markup but doesn't get the style of a collapsible.
The same functions work well when invoked on $(document).ready function. But I have a lot of data and simply can't bring in everything on that event.
snippet of code tried on 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();
});
Here is a snippet:
$(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 + '~ '
+ time + ' ~ ' + 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
+ ' ' + time + ' '
+ 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());
}
When I did an inspect element, I found that the collapsibles do not get injected within
<div class="ui-collapsible-content ui-body-c" aria-hidden="false"></div> tag. Instead they get appended after it.
<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>
Page looks like the following:

Answer 1

I found a soultion to this by appending to .appendTo('#' +event.target.id + ' ui-collapsible-content');.