jQuery Mobile动态添加内容的样式刷新问题

需要动态往resultDiv中添加listview列表

  <div data-role="content" id="resultDiv">
    <div id="resultDiv" style="margin-top:10px">
    </div><!--END RESULTDIV-->
  </div><!--END CONTENT-->

resultDiv.append('<ul data-role="listview" id="myList">\
		<li data-role="list-divider">提单号:</li>\
		<li class="dataList" data-icon="arrow-d">\
		<a>\
		<h1>进仓</h1>\
		数量:123 重量:12322.23 费用:1230.12\
		</a>\
		</li>\
		</ul>');

结果生成的ul没有任何样式

网上查询到一个各种标签动态更新后的刷新方法,内容很多,也包括listview

1.Textarea fields

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

2.Text input fields

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

3.Buttons

1 2	$( 'body' ).append( '<a href="" data-theme="e" id="myNewButton">testing</a>' ); $( '#myNewButton' ).button();

4.Combobox or select dropdowns

1 2 3 4 5 6 7 8 9 10

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

5.Listviews

1 2 3 4 5 6 7

<ul id= "myList"  data-role= "listview"  data-inset= "true" > <li>Acura</li> <li>Audi</li> <li>BMW</li> </ul>    $( '#mylist' )

6.Slider control

1 2 3 4 5 6

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

7.Toggle switch

1 2 3 4 5 6 7 8 9 10 11

<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" );

8.Radio buttons

1 2 3 4 5 6 7 8 9 10 11 12 13

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

9.Checkboxes

1 2 3 4 5 6 7 8 9

<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的方法在js中添加了

$("#myList").listview('refresh');

运行失败

提示:Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

后查询 有资料说如果整个page都是后添加的,才会出现这个错误,给page加上.page()就可以了

但我这个page是原本就存在而不是后添加的,并且加上.page()也照样报错

最后找到个方法,使用trigger('create')来刷新

在append之后添加

resultDiv.trigger('create');

得到正确的样式

但为什么 $("#myList").listview('refresh');会失败,仍旧无解