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');//代码位置
}
}
});