いくつかのページがメインになっているJqueryモバイルプロジェクトがあり、そのうちの1つは次の構造を持っています:
@*Pagina componentes del documento*@
<div id="PagDocumentoComponentes" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<a id="BtnVolverPagComponentes" href="#" data-rel="back" data-icon="back">Volver</a>
<span id="PagDocumentoComponentesAdvertencia" style="color:red">Kit Incompleto</span>
<h3 id="PagDocumentoComponentesTitulo">Componentes del Kit</h3>
</div>
<div data-role="content">
<p>
<div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="ComponentesDocumentoDisponibles">
<div data-role="collapsible" data-theme="e">
<h2>No hay componentes</h2>
</div>
</div>
</p>
</div>
</div>
id="ComponentesDocumentoDisponibles" でマークされた折りたたみ可能なセットには、次のコードが動的に入力されます。
function mostrarComponentes(tcLink) {
$.post(tcLink, function (dataComponentes) {
$('#ComponentesDocumentoDisponibles').children('.ui-collapsible').children('ul').remove('li',false);
$('#ComponentesDocumentoDisponibles').children('.ui-collapsible').remove();
// Se recorre cada item del kit que tiene componentes variables
}).error(function (dataError) {
alert('No se pudo caragr la información el kit (' + dataError + ')');
}).success(function (dataComponentes) {
var kitNode = ''
var ItemNode = '';
$(dataComponentes).each(function (object) {
var kit = $(this)[0];
var idComponente = kit.id;
kitNode += format('<div data-role="collapsible" data-max="1" id ="{0}" data-theme="e">', idComponente + "Collapsible");
kitNode += format(' <h2>{0}</h2>', kit.StrDescripcion);
kitNode += format(' <ul data-role="listview" data-inset="true" id="{0}">', idComponente);
// Se recorre cada item que compone el kit
$(kit.ItemsEnKit).each(function (object) {
var item = $(this)[0];
var iconoResta = '<image src="' + item.Image.toString() + '" class="ui-li-icon" style="width:22px;height:22px" />'
ItemNode = format('<li data-cantidad="{0}" data-icon="plus" id="{1}">', item.NumCantidadAsignada.toString().trim(), item.Id);
ItemNode += format(' <a href="#" onclick="modificarComponentes({0},{1});">{2} {3}</a>', quote(item.AccionDisminuir), quote(item.IdCantidad), iconoResta, item.StrDescripcion);
ItemNode += format(' <a href="#" onclick="modificarComponentes({0},{1});"></a>', quote(item.AccionAumentar), quote(item.IdCantidad));
ItemNode += format(' <span id="{0}" class="ui-li-count">{1}</span>', item.IdCantidad, item.NumCantidadAsignada);
ItemNode += format('</li>');
kitNode += ItemNode;
});
kitNode += format(' </ul>');
kitNode += format('</div>');
});
$('#ComponentesDocumentoDisponibles').html(kitNode);
$('#ComponentesDocumentoDisponibles').collapsible();
$('#ComponentesDocumentoDisponibles').find('div[data-role=collapsible]').collapsible();
$(dataComponentes).each(function (object) {
var kit = $(this)[0];
$("#" + kit.id + "Collapsible" ).collapsible();
try
{
$("#" + kit.id).listview();
} catch (e) {
alert(e.message);
}
});
});
//PagDocumentoComponentes
//ComponentesDocumentoDisponibles
}
典型的なケースでは、この関数はそれぞれにリストビューを持つ 2 つの折りたたみ可能な項目を構築する必要があります。
私の問題は try catch ブロックにあります。正常に動作する場合もあれば、この例外をスローする場合もあります。
Unable to get the property 'jQuery182044178615987382985' not defined or null reference
各リストを初期化しようとすると。
折りたたみ可能な要素は常に正常に初期化され、
注: 折りたたみ可能なセットの親ページに少なくとも 1 回アクセスすると、すべて問題なく動作します。