Dynamically append a link button
===

I'm attempting to add a link button to a jquery mobile page : 

http://jsfiddle.net/8JXTT/1/

The button is not being generated correctly, a link is being generated but not the button itself. Am I missing a css class ?

Code  :

    <div data-role="page" id="firstpage">
    
            <div data-role="header">
                    <h1>First Page</h1>
            </div>
    
    <div data-role="content" id="links">
            <a href="#secondpage" data-role="button">Link button</a>
    </div>
    
            <div data-role="footer">
                    <h4>Page Footer</h4>
            </div>
            
    </div>
    
    <div data-role="page" id="secondpage">
    
            <div data-role="header">
                    <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
            </div>
    
            <div data-role="content">
                    <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                    <p><a href="#thirdpage">Go to third page</a></p>
            </div>
    
            <div data-role="footer">
                    <h4>Page Footer</h4>
            </div>
    </div>
    ​$(document).ready(function() {
    
    $('#links').append('<a href="#secondpage" data-role="button" data-theme="c">Link Button</a>');
        
        }); 

​