jquery - 页面加载后添加jQueryMobile元素

考虑以下非常简单的代码摘录：

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

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

    appendSomeJQueryMobileStuff();

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

</script>

（在https://jsfiddle.net/ca544oob/上试用）

为什么只有第一个<select>与jQuery一起显示，而第二个完全没有格式化？我看到的两个函数调用之间的唯一区别是发生的时刻。

我该如何解决呢？

最佳答案

使用jQuery Mobile，可以在包含选择菜单的任何页面上自动初始化选择菜单插件，而无需标记中的data-role属性。您可以从官方文档here中查看详细信息。在您的情况下，您要在select上附加pageinit，因此您需要通过添加以下内容来手动初始化select menu plugin

$( "select" ).selectmenu();

后

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

您最终的工作代码将是..

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

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

    }

    appendSomeJQueryMobileStuff();

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

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

</script>

希望它对你有用。

关于jquery - 页面加载后添加jQueryMobile元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33596134/

SELECT

jquery - 页面加载后添加jQueryMobile元素