页面加载后添加jQueryMobile元素

Question

请看下面的非常简单的代码摘录：

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

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

    appendSomeJQueryMobileStuff(); 

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

</script> 

（尝试一下@https://jsfiddle.net/ca544oob/）

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

我该如何解决这个问题？

Answer 1

使用jQuery移动，选择菜单插件自动包含选择菜单的任何页面上进行初始化，而无需在markup.You一个data-role属性可以从官方文档here查看详细信息。在你的情况，你是在附加pageinitselect，所以你需要通过增加

$("select").selectmenu(); 

后

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

手动初始化select menu plugin你最后的工作代码就会像..

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

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

    } 

    appendSomeJQueryMobileStuff(); 

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

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

</script> 

希望它能为你工作。