Dynamically append a link button

Question

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

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

    });

score 4 · Accepted Answer · edited May 23 '17 at 10:34

4

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

edited May 23 '17 at 10:34

Community

1
1

answered Jul 18 '12 at 15:52

thecodeparadox

86,271
21
138
164

1

`.ready` shouldn't be used with jQuery Mobile, instead, `pageinit` is the proper event. Please take a look at this http://stackoverflow.com/a/14469041/1771795 – Omar Jun 11 '13 at 09:24

score 1 · Answer 2 · edited Jul 18 '12 at 16:03

You have to instantiate it. The other button is getting instantiated after the page loads. Then you are adding the other link.

After you add the link you need to call the function on that link:

$("a").button();

It would be easier if you gave it an id or class to call to differentiate it from the ones that are already set.

Edit: Instantiated is probably the wrong term. You just need to call the function to apply the styles to that new link:

$(document).ready(function() {
    $('#links').append('<a href="#secondpage" data-role="button" data-theme="a">Link Button</a>');
    $('a[data-role=button]').button();
});

Dynamically append a link button

2 Answers2

But one note

Thanks @omar for excellent comment