Jquery mobile 动态jQuery Mobile SelectMenu过早地设置了样式

Knockout是向jQuery移动页面动态添加选择菜单。当它出现时，它有一些选择菜单样式，即使它还没有初始化为一个。当我初始化它时，这会导致一个问题，因为它被包装在一个额外的

ui-select

中。这是什么原因造成的？我如何修复它

这里有一个例子。选中“显示选项”以显示选择。然后单击其中一个按钮查看问题

---

看着你的小提琴，选择不是动态的，只有选择中的选项是动态的。因此，您可以做的一件事是在标记中将data role=“none”添加到select中，以便jQM在页面初始化期间不会触及它。然后，当您调用

.selectmenu（）

时，它会显示正确

您已更新的

更新：

使用适当的jQM结构和事件：

我的页面
显示选项


创建选择
刷新选择
创建页面
var vm={
选项：[“A”、“B”、“C”]，
showOptions:ko.observable（），
选择选项：可观察（“B”）
};
ko.应用绑定（vm）；
$（文档）。在（“pagecreate”和“page1”上，函数（）{
$（“按钮”）。在（“单击”上，函数（）{
var id=$（this.prop（“id”）；
如果（id=“a”）{
$（“选择”）.selectmenu（）；
}否则，如果（id=“b”）{
$（“选择”）。选择菜单（“参考”）；
}否则，如果（id=“c”）{
$（“.ui页面”）.trigger（“创建”）；
}
});
});

它是动态的，因为父项上的

if

绑定，它在

showOptions

为真之前不存在于页面上。我现在明白了，你是对的。如果您构建jQM页面并使用jQM事件：动态选择是在没有jQM增强的情况下创建的。然后调用selectmenu（）就可以了。每当我的JSFIDLE JavaScript设置被设置为Nowrap-in而不是onLoad时，我的演示似乎和你的一样工作。为什么当设置为onLoad时，jQuery Mobile会在显示

时立即选择
？
<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");
        }
    });
});