Jquery mobile 动态创建表时为什么不应用jQuery mobile样式

我在项目中使用jquerymobile1.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;
}

函数CretaeTable（）{
var vectorLayersList=$（“#vectorLayersList”）；
var arr=[{id:'124'，Title:'qqq'}，
{id:'589'，Title:'www'}，
{id:'45'，Title:'eee'}，
{id:'567'，Title:'rrr'}]
var表=层列表表（arr）；
vectorLayersList.append（表）；
}
功能层列表表（层）{
//建表
var frame=''；
var smallHeader='title'；
变量内容=帧+小标题+“”；
$。每个（$（层），函数（）{
//我们将在HTML5数据属性中存储该ID，以备以后使用
内容+=''；
//给你的按钮上课，以便以后使用
内容+=‘编辑’；
内容+=‘删除’；
内容+=''+此.标题+''；
内容+=''；
});
内容+=''；
内容+=''
返回内容；
}

这是

---

为什么不应用JQM样式？

您只需重新生成表，然后可能会更新整个页面内容的布局：

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

content+='Edit'；
内容+=‘删除’；

---

这是您更新的Fiddle:

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

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

content+='Edit'；
内容+=‘删除’；

---

这是您更新的小提琴：

小提琴中的按钮似乎不起作用。@CBroe请参阅更新，我修复了小提琴示例。小提琴中的按钮似乎不起作用。@CBroe请参阅更新，我修复了小提琴示例。

vectorLayersList.append（table）.enhanceWithin（）就足够了。
vectorLayersList.append（table.enhanceWithin（）就足够了。