3

XML データを使用して listViews で動的な折りたたみ可能なセットを生成しています。正しく生成されていますが、別のページに移動する前にデータを表示するには、クリック/タッチ イベントが必要です。これが私のコードです:

$("#dvAccordion").empty();
var outdiv = $('<div data-role="collapsible-set"></div>');
$(strXML).find('Category').each(function(){
    var colldiv = $('<div data-role="collapsible" data-collapsed="true"></div>');
    colldiv.append('<h3>' + $(this).find('Category_Name').text() + '</h3>');    
    var uldiv = $('<ul  data-role="listview" data-inset="false"></ul>');
    colldiv.append(uldiv);
    //
    $(this).find('Menu_Item').each(function(){
        var sItemName = $(this).find('item_name').text() ;
        uldiv.append('<li data-name="baby"><a href="menu.html" rel="external">' + sItemName + '</a></li>');                         
    });
    //
    //$('#dvAccordion').listview('refresh');
    //
    outdiv.append(colldiv);
    outdiv.appendTo('#dvAccordion');
});
//$('#dvAccordion [data-role=collapsible-set]').collapsibleset();
//$('#dvAccordion').collapsibleset();
//$('#dvAccordion').collapsibleset('refresh');

$('#dvAccordion').trigger('create');

次のように、ページの読み込み時に eventListener を追加しています。

$('#dvAccordion ul').children('li').bind('vclick', function(e) {
alert('Selected Name=' + $(this).attr('data-name'));
});

このバインド コードは、HTML の静的な折りたたみ可能なセットの場合は正常に機能します。「menu.html」に移動する前にアラートを表示します。しかし、私の動的セットでは、アラートなしで「menu.html」に移動します。助けてください。

4

1 に答える 1