Reputation: 435
I am generating a dynamic collapsible-set with listViews using XML data. It's generated correctly, but I need a click/touch event to display some data before it goes to another page. Here is my code:
$("#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');
I am adding an eventListener on page load like this:
$('#dvAccordion ul').children('li').bind('vclick', function(e) {
alert('Selected Name=' + $(this).attr('data-name'));
});
This bind code works fine if it's for a static collapsible-set of HTML. It shows an alert before moving to 'menu.html'. But for my dynamic set it moves to 'menu.html' without any alert. Please help.
Upvotes: 3
Views: 4054
Reputation: 7380
Call the function generateDynamicAccordion();
first.
DEMO here http://jsfiddle.net/yeyene/MvcHm/9/
generateDynamicAccordion();
$('#dvDynamic_selectId ul').children('li').bind('vclick', function(e) {
var sId = $(this).attr('data-id');
alert('Selected id=' + sId);
});
//
$('#dvStatic_selectId ul').children('li').bind('vclick', function(e) {
var sId = $(this).attr('data-id');
alert('Selected id=' + sId);
});
Upvotes: 1