Question

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

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

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

    appendSomeJQueryMobileStuff();

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

</script>

（试试@ https://jsfiddle.net/ca544oob/）

为什么只有jQuery显示第一个<select>，但第二个没有格式化？我看到的两个函数调用之间的唯一区别就在于它发生的时刻。

我该如何解决这个问题？

Answer 1

使用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>

希望它对你有用。

页面加载后添加jQueryMobile元素

1 个答案: