jQuery Mobile動態添加數據後渲染視圖

jQuery Mobile動態添加數據後渲染視圖：

0.Textarea field

$('body').prepend('<textarea id="myTextArea"></textarea>');
$('#myTextArea').textinput();

1.Text input field

$('body').prepend('<input type="text" id="myTextField" />');
$('#myTextField').textinput();

2.button

$('body').prepend('<input type="text" id="myTextField" />');
$('#myTextField').textinput();

3.Combobox or select dropdowns

<label for="sCountry">Country:</label>
<select name="sCountry" id="sCountry">
    <option value="">Where You Live:</option>
    <option value="ad">Andorra</option>
    <option value="ae">United Arab Emirates</option>
</select>
 
var myselect = $("#sCountry");
myselect[0].selectedIndex = 3;
myselect.selectmenu('refresh');

4.最多見的動態添加 listview>li 標籤

<ul id="myList" data-role="listview" data-inset="true">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
 
$('#mylist').listview('refresh');

5.Slider control

<div data-role="fieldcontain">
    <label for="slider-2">Input slider:</label>
    <input type="range" id="slider-2" value="25" min="0" max="100" />
</div>
 
$('#slider-2').val(80).slider('refresh');

6.Toggle switch

<span><div data-role="fieldcontain">
    <label for="toggle">Flip switch:</label>
    <select name="toggle" id="toggle" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select> 
</div>
 
var myswitch = $("#toggle");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");</span>

7.Radio

<span><div data-role="fieldcontain">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Layout view:</legend>
            <input type="radio" name="radio-view" value="list"  />
            <label for="radio-view-a">List</label>
            <input type="radio" name="radio-view" value="grid"  />
            <label for="radio-view-b">Grid</label>
            <input type="radio" name="radio-view" value="gallery"  />
            <label for="radio-view-c">Gallery</label>
    </fieldset>
</div>
 
$("input[value=grid]").attr('checked',true).checkboxradio('refresh');</span>

8.Checkboxes

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Agree to the terms:</legend>
        <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
        <label for="checkbox-1">I agree</label>
    </fieldset>
</div>
 
$('#checkbox-1').attr('checked',true).checkboxradio('refresh');

【代碼位置】 以listview爲例：

$.ajax({
            type:"post",
            url:'php/json.php',
            data:{},
            datatype:'json',
            success:function(data){
                var ul=$('#myList');
                var dic=JSON.parse(data);
                for(var i=0;i<dic.length;i++){
                    var li=$('<li></li>');
                    var a=$('<a></a>');
                    a.html(dic[i].tname);
                    li.append(a);
                    ul.append(li);
                    $('#myList').listview('refresh');//代碼位置
                }
            }
        });