JQuery Mobile - 解決動態更新頁面內容，CSS失效問題！

今天編寫JQuery Mobile程序，需要對數組數據動態創建，並且每條數據對應一個復選框，於是我很順利寫了一個Demo，當我運行時候發現，和我期望的不一樣！復選框確實創建出來了，但是卻沒有CSS效果，完全是Html的！於是上網搜索，想盡快解決，但是，發現網上目前提供的方法都無法解決！！最終，我就算是搞定這個問題了吧，下面我說說解決方法，拋磚引玉！

我最開始的想法是直接使用控件組，那樣直接就創建出來一組復選框了，我對這個復選框父控件插入我動態更新的內容，不就可以了嗎？這是我最開始的代碼：

        <fieldset data-role="controlgroup" style="margin-left: -5px" id="activity-controlgroup" class="test">
            <label for="red">包餃子</label>
            <input type="checkbox" name="activity-radio" id="red" value="red">
            <label for="green">丟手絹</label>
            <input type="checkbox" name="activity-radio" id="green" value="green">
            <label for="blue">投沙包</label>
            <input type="checkbox" name="activity-radio" id="blue" value="blue">
        </fieldset>

但是，經過一番努力，發現在動態更新了里面內容后，怎么也無法讓JQuery Mobile啟動CSS，和其它控件風格一致！！！！

折騰半天后，停下來，喝了一點咖啡，隨后我就開始想，這個東西到底該怎么能到達或接近JQuery Mobile的CSS效果呢？讓這些復選框和這個頁面中的其它JQuery Mobile效果一致？在我的程序里面，很多地方用到了listview，它也需要動態更新數據，listview有個方法“refresh”，在更新完數據后，調用這個方法就可以了！於是，我就去JQuery Mobile的官方網站看資料去了，最終查看以下這么多控件具備“refresh”方法：

 具備refresh方法的控件：

1，Collapsibleset Widget 

2，Filterable Widget

3，Flipswitch Widget

4，Listview Widget

5，Rangeslider Widget

6，Selectmenu Widget

7，Slider Widget

8，Column-Toggle Table Widget

9，Reflow Table Widget

10，Tabs Widget

11，Toolbar Widget

好了，我為什么去看哪些控件具備“refresh”方法呢？換成Delphi來說吧，並不是所有它的控件都具備容器功能，有容器功能的控件可以容納其它控件，不僅僅是Delphi，包括其它很多種圖形界面開發工具和具有圖形庫的語言，都是這樣的！那么很可能，在JQuery Mobile里，具備“refresh”方法的控件，是容器功能控件，可以容納其它控件！如果是這樣，那么，我把我要動態加載的復選框放到具備“refresh”方法的容器控件里，是不是就可以了呢？下面就是我當前的代碼：

1，被點擊的按鈕。點擊它，動態創建那些要更新的內容，並更新到指定位置。

 <a href="#" id="activityDetail2-selectCourse" onclick="CreateActivity()"
           class="ui-btn ui-corner-all ui-shadow ui-btn-inline"
           style="padding-top: 5px;padding-bottom: 5px;padding-left: 15px;padding-right: 15px;margin-left: -5px;margin-top: -5px">選擇課時</a>

2，響應上面按鈕的函數。

    <script language="JavaScript">

        function CreateActivity() {

            //要更新的數據
            var temp = '';
            for (var i = 1; i < 5; i++) {

                temp += '<label for="activity-' + i + '" >活動 ' + i + '</label>';
                temp += '<input type="checkbox" name="activity" id="activity-' + i + '" value="">';
            }

            //對指定的工具欄更新數據
            $("#activity-controlgroup").html(temp);

            //刷新剛動態更新數據的工具欄
            $("#activity-controlgroup").toolbar("refresh");
        }
     </script>

3，兩個Toolbar類型的容器。兩個做對比。

        <div data-role="footer" id="activity-controlgroup2">
            <h4>Powered by jQuery Mobile</h4>
        </div>

        <br>

        <div data-role="footer" id="activity-controlgroup" class="ui-corner-all ui-shadow">
            <h4>Powered by jQuery Mobile</h4>
        </div>

截圖就不上了，把這些代碼放到可以正常運行的JQuery Mobile頁面中，運行一下就可以看到效果了！目前這種程度不一定完全適合每個人，個人根據自己需要繼續調整CSS吧！！

參考：

https://api.jquerymobile.com/category/widgets/

http://demos.jquerymobile.com/1.4.4/toolbar/#&ui-state=dialog