頁面加載後添加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> 

希望它能爲你工作。