Trying to dynamically generate an unordered list from XML onto a jQuery mobile page has been a bit of a challenge for me. While I can display the items on the page, the styling never seems to work properly, only showing up as plain text with blue links. Is there a different approach I should take to style the list?
<ul id="events-holder" data-role="listview" data-inset="true" data-theme="c">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "event_list.php",
dataType: "xml",
success: function(xml) {
$(xml).find('event').each(function() {
var title = $(this).find('title').text();
var date = $(this).find('date').text();
var url = $(this).find('url').text();
$('<li></li>')
.html('<li><a href="'+url+ '" rel="external" data-transition="slide">'+ title +'</a></li>')
.appendTo('#events-holder')
.trigger('create');
});
}
});
});