我是 JQM 的新手，但我已经阅读了很多博客和文档，但这些知识在这里对我没有帮助。我已阅读有关页面创建与刷新事件的信息。通过我在jsfiddle上看到的示例，创建事件可以正常工作。但是当我尝试编码时，它似乎不起作用。
我在展开时将 collapsibes 动态注入到 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 + '~ '
+ 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());
}
当我做一个检查元素时，我发现可折叠元素没有被注入到
<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>
页面如下所示：
