Warum der mobile jQuery-Stil nicht angewendet wird, wenn die Tabelle dynamisch erstellt wird

Question

Ich benutze jQuery mobile 1.4.5 in meinem Projekt.

Ich erstellen dynamische Tabelle mit Schaltflächen per Klick. Wenn eine Tabelle erstellt wurde, gilt der JQM-Stil nicht.

Hier ist mein HTML-Code:

<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> 

Hier ist JavaScript-Code:

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; 
} 

Hier ist JSFIDDLE.

Warum JQM-Stil nicht zutrifft?

Answer 1

Sie benötigen jist nur die Tabelle neu zu erstellen, und dann vielleicht das Layout der gesamten Seiteninhalt aktualisiert:

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

Bitte beachten Sie: Sie auch auf die Schaltfläche Markup anpassen kann, etwa wie folgt:

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

Hier ist die aktualisierte Fiddle: http://jsfiddle.net/aJUy8/105/