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 属性。可以查看官方文档 here 详细信息。在您的情况下，您要在 pageinit 上附加 select ，因此您需要通过添加

手动初始化 select 菜单插件

$( "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>

希望它对您有用。