Adding jQueryMobile elements after page load

Question

Consider the following very simple code excerpt:

(...)
<div id="myDiv"></div>

<script>
    function appendSomeJQueryMobileStuff() {
        $('#myDiv').append($('<select/>'));
    }

    appendSomeJQueryMobileStuff();

    $(document).on('pageinit', function() {
        appendSomeJQueryMobileStuff();
    });

</script>

(try it out @ https://jsfiddle.net/ca544oob/)

Why is only the first <select> displayed with jQuery, but the second one isn't formatted at all? The only difference between the two function calls that I see is the moment when it happens.

And how do I fix this?

Answer 1

Using jQuery Mobile , select menu plugin is auto initialized on any page that contains a select menu, without any need for a data-role attribute in the markup.You can check detail from official documentation here. In your case, you are appending select on pageinit , So you need to initialize the select menu plugin manually by adding

$( "select" ).selectmenu();

after

 $('#myDiv').append($('<select/>'));

Your final working code will be like..

(...)
<div id="myDiv"></div>

<script>
    function appendSomeJQueryMobileStuff() {
        $('#myDiv').append($('<select/>'));

    }

    appendSomeJQueryMobileStuff();

    $(document).on('pageinit', function() {
        appendSomeJQueryMobileStuff();

    // Initialization of Select Menu Plugin
        $( "select" ).selectmenu();
    });

</script>

Hope it will work for you .