Question

Is there a way to make jQuery Mobile render a javascript-generated link as a button widget, like it does automatically when loading the page?

I have javascript like this to create the link dynamically:

var ws=document.getElementById('workspace'); // empty <div id="workspace"></div>
ws.innerHTML='<a id="myb" href="foo.php" data-role="button">baz</a>';

And of course it only generates a normal link instead of a button, so my question is how do I make jQueryMobile create the button dynamically, as it would have done if the same <a id="myb" href="foo.php" data-role="button">baz</a> had appeared in the page from the beginning?

EDIT :

A script like this:

$('#tagspace').html('<a id="myb" data-inline="true" data-ajax="false"
                    href="boo.php" data-role="button">baz</a>')
              .button()
              .click(function() { window.location.href=this.href;});

Is an improvement. It does result in a button (full page width), and that is sensitive to clicks outside of the text of the label. However, this doesn’t seem to be mapped to the element containing the intended link “destination”.

The DOM results of this:

<div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-fullsize
                                      ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false" data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"> <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">baz</span>
</span>
    <div aria-disabled="false" class="ui-btn-hidden" id="tagspace"> <a id="myb" data-inline="true" data-ajax="false" href="boo.php" data-role="button">baz</a>

    </div>
</div>

So, it is still not the same kind of button.

Answer 1

You can create a button widget by wrapping your element in a jQuery object and calling the button() method.

$("#workspace").html("<a id='myb' href='foo.php' data-role='button'>baz</a>")
               .button();

Update: The button widget prevents the default behavior of the link, so you will have to add a click handler if you want that behavior back:

$("#workspace").html("<a id='myb' href='foo.php' data-role='button'>baz</a>")
               .button()
               .click(function() {
                   window.location.href = this.href;
               });