Question

I have a JS function below that generates an href which includes the JQ Mobile data-role=”button” class. This is being ignored by the browser – can anyone suggest a solution.

<script>  
    function showCONTACTDETAIL() {

        var tryouttext='<a href="" data-role="button">hey this is cool</a>';
        jQuery('#tryout').html(tryouttext);

        }
    $('#cusdetail').live('pageshow', function () { showCONTACTDETAIL();  });
</script>

Answer 1

Use

jQuery('#tryout').html(tryouttext).trigger( "create" );

You need to trigger the create event on a container, to make all dynamic content in that container to get styled..

---

Quoting from http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Now, our handy create event will initialize all the necessary plugins
within that markup, just like how the page creation enhancement
process works. If you were to use Ajax to load in a block of HTML
markup (say a login form), you can trigger create to automatically
transform all the widgets it contains (inputs and buttons in this
case) into the enhanced versions.