jquery - Styling missing when using append - jquery mobile

Question

Using jquery mobile the following code (below) works, but when it renders to the page the styling is missing. They are just plan links and do not take on the data-role="button" styling at they should. I have hardcoded the same link the code generates and this is styled ok.

How to I fix this?

Thanks

   $(document).on('pagebeforeshow', '#index', function(){

    $.each(siteData["pages"], function(i,v) {    
         $.mobile.activePage.find('[data-role=content]').append('' +
                 '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>');
    });

   });

markup

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
    </div>

    <div data-role="content" class="navlist">
    </div>

    <div data-role="footer">
</div>

What I get...

What it should look like...

Same content that the code renders on the second image but the dynamic one is missing the styling.

Answer 1

Add .trigger('create') after .append()

Working example

$.each(siteData["pages"], function(i,v) {    
 $.mobile.activePage.find('[data-role=content]').append('' + '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create');
});