Question

I’ve been trying to dynamically create an unordered list from XML to a JQuery mobile page.
I can get the items to show up on the page, but the style never appears as it should..with the normal blue link plain text, that is all. Is there another method of styling 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'); 
            });
        }
    });
});

Answer 1

It depends on your css, but I suspect the problem is that your dynamically created <li>s are doubled up. You are creating an <li> with $('<li></li>') and then adding another <li> inside it in the .html() call.

Try removing the <li> tag from your .html() string