Question

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>');

    }); 

​

Answer 1

Only appending a tag will not solve your problem, because jQuery mobile change its structure for styling purpose. So you have to .clone() an existing tag and change its text.

$(document).ready(function() {
    var linkButton = $('#links a').clone(true);
    linkButton.find('span.ui-btn-text').text('Link Button2');
    $('#links').append(linkButton);
});

But one note

As above code is cloning an existing a tag and if your a has id, then id duplication will happen. So change the id to class (if exists).

Demo

Thanks @omar for excellent comment