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

Question

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

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

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

    appendSomeJQueryMobileStuff();

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

</script>

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

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

我该如何解决这个问题？

Answer 1

使用 jQuery Mobile，选择菜单插件会在任何包含选择菜单的页面上自动初始化，而无需标记中的任何data-role属性。您可以在此处查看官方文档的详细信息。在您的情况下，您正在附加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>

希望它对你有用。