dynamic jQuery Mobile SelectMenu is prematurely styling - jquery-mobile

Question

Knockout is dynamically adding a select menu to a jQuery Mobile page. When it appears it has some select menu styling even though it hasn't been initialized as one. This causes a problem when I do initialize it because then it is wrapped in an extra ui-select. What is causing this and how can I fix it?
Here is an example. Check 'show options' to display the select. Then click one of the buttons to see the problem.
http://jsfiddle.net/5udqV/1/

Answer 1

Looking at your fiddle, the select is not dynamic, only the options within the select are. So one thing you could do is in the markup add data-role="none" to the select so that jQM does not touch it during page initialization. Then when you call .selectmenu() it will look right.
Your updated FIDDLE
UPDATE:
Use proper jQM structure and events:
DEMO
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">show options
<input type="checkbox" data-bind="checked: showOptions" />
<br />
<div data-bind="if: showOptions">
<select data-bind="options: options, value: selectedOption"></select>
</div>
<button id="a">create select</button>
<button id="b">refresh select</button>
<button id="c">create page</button>
<div data-bind="text: ko.toJSON($root)"></div>
</div>
</div>
var vm = {
options: ["A", "B", "C"],
showOptions: ko.observable(),
selectedOption: ko.observable("B")
};
ko.applyBindings(vm);
$(document).on("pagecreate", "#page1", function () {
$('button').on("click", function () {
var id = $(this).prop("id");
if (id == "a") {
$("select").selectmenu();
} else if (id == "b") {
$("select").selectmenu("referesh");
} else if (id == "c") {
$(".ui-page").trigger("create");
}
});
});