为什么在 table 动态创建时未应用 jQuery 移动样式

Question

我在我的项目中使用 jQuery 移动版 1.4.5。

我通过单击动态创建带有按钮的 table。当 table 创建时，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

你只需要重建table，然后可能会更新整个页面内容的布局：

 ... 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>';

这是您更新后的 Fiddle：http://jsfiddle.net/aJUy8/105/

为什么在 table 动态创建时未应用 jQuery 移动样式

Why jQuery mobile style not applied when table created dynamically

jquery-mobile