jQuery mobile开发之listview动态加载数据问题

  listview是在开发中经常用到的功能，在jQeury mobile中的具体实现如下：

              <ul data-role="listview" id="meetinglistul">
                  <li>
                      <a href="#meetingDetail">
                          <img src="images/car.jpg" />
                          <h2>移动互联网大会</h2>
                          <p style="color:blue">时间：2016.5.10-2016.5.13</p>

                      </a>
                  </li>
                  <li>
                      <a href="#meetingDetail">
                          <img src="images/car.jpg" />
                          <h2>ios移动论坛开发者大会</h2>
                          <p style="color:blue">时间：2016.5.10-2016.5.13</p>

                      </a>
                  </li>
              </ul>

  效果如如下：

  


  当想往listview中动态添加数据时，我们一般的做法是：在js文件中添加下面代码(或是采用jquery的模板也可以)

                var  contenthtml =   '<li>'+' <a href="#meetingDetail">'
                                     +'<img src="images/car.jpg" />'
                                   +'<h2>局机关成果涉密培训会议</h2>'
                                   +'<p style="color:blue">时间：2016.5.10-2016.5.13</p>'
                                   + ' </a>' + '</li>';

                $("#meetinglistul").append(contenthtml);

  

 但是当刷新页面后，发现新加的列表项格式不是data-role="listview'中默认的，效果如下：



 检查一下代码发现添加的内容都正确啊，这是怎么回事呢？上网查了一下，原来是jQuery Mobile并没有对于新添加的元素进行渲染。这种情况下就需要对元素的样式进行刷新。

添加如下代码：$('#meetinglistul').listview('refresh');即可完成刷新，刷新后就恢复正常啦。



 总结：利用jQuery mobile进行开发时，当往框架中添加新元素时，一定要注意及时渲染刷新。