爲什麼jQuery手機風格不適用動態創建表時

Question

我在我的項目中使用jQuery手機1.4.5。

我用按鈕點擊動態創建表。當創建表格時，JQM樣式不適用。

這裏是我的HTML代碼：

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>My page</h1> 
    </div> 
    <div data-role="content" class="ui-content"> 
    <button onclick="CretaeTable()">Cretate table</button> 
    <div id="vectorLayerslist"></div> 
</div> 

下面是JavaScript代碼：

function CretaeTable(){ 
    var vectorLayersList = $('#vectorLayerslist'); 
    var arr = [{id:'124',Title:'qqq'}, 
       {id:'589',Title:'www'}, 
       {id:'45',Title:'eee'}, 
       {id:'567',Title:'rrr'}] 

    var table = layersListTable(arr); 
    vectorLayersList.append(table); 
} 

function layersListTable(layers) { 
    // build the table 
    var frame = '<fieldset style="border: solid 1px #6b6b6b;">'; 
    var smallHeader = '<legend>title</legend>'; 
    var content = frame + smallHeader + '<table data-role="table" id="layersListEditable" data-mode="columntoggle:none" class="ui-responsive"><thead><tr></tr></thead>'; 
    $.each($(layers), function() { 
     // we'll store the ID in HTML5 data-attribute for later 
     content += '<tr>'; 
     // give classes to your buttons for later 
     content += '<td><button data-mini="true" data-inline="true" data-icon="edit" data-theme="b" type="button" class="edit">Edit</button></td>'; 
     content += '<td><button data-mini="true" data-inline="true" data-icon="delete" data-theme="b" type="button" class="delete">Delete</button></td>'; 
     content += '<td style="vertical-align: inherit;">' + this.Title + '</td>'; 
     content += '</tr>'; 
    }); 
    content += '</table>'; 
    content += '</fieldset>' 

    return content; 
} 

這裏是JSFIDDLE。

爲什麼JQM風格不適用？

Answer 1

您JIST只需要重建表，然後可能更新整個頁面內容的佈局：

... your dynamic table creation 
vectorLayersList.append(table); 
// add this: 
$("#layersListEditable").table().table("rebuild"); 
$(".ui-content").trigger("updatelayout"); 

請注意：您也可以調節按鈕的標記，像這樣：

content += '<td><button class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-edit">Edit</button></td>'; 
content += '<td><button class="ui-btn ui-mini ui-btn-inline ui-btn-icon-left ui-icon-delete">Delete</button></td>'; 

這是你更新的小提琴：http://jsfiddle.net/aJUy8/105/