动态加载后ListView无法通过jQuery刷新样式问题求助

兄弟，折腾10小时确实够闹心的！你的问题核心很明确：动态添加列表项后没有触发jQuery Mobile ListView的刷新机制，导致组件没把样式应用到新添加的内容上。

问题分析 #

jQuery Mobile的组件（比如ListView）在页面初始化时会自动渲染样式，但当你通过JS动态添加内容后，这些新元素不会被自动处理——你必须手动告诉ListView重新计算并应用样式。

修改后的完整代码 #

<div data-role="content" id="content"> 
  <ul id="dataList" data-role="listview" data-autodividers="true" data-filter="true" data-filter-placeholder="Search..." data-inset="true" > 
  </ul> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
  var $dataList = $("#dataList"); 
  $.getJSON("starWars.json", function(data) { 
    $.each(data, function(i, item){ 
      $dataList.append('<li><a href="#'+item.name+'"><img src="images/'+item.pic+'" alt="'+item.name+'"/><h1>'+item.name+'</h1><p>'+item.about+'.</p></a></li>'); 
    });
    // 关键：添加完内容后刷新ListView
    $dataList.listview("refresh");
  }); 
}); 
</script>

关键修改点说明 #

• 修正语法错误：你原本的$.getJSON(..., (function(data){...}))里多了一层括号，改成$.getJSON(..., function(data){...})即可；另外$(document).ready()结尾的)()是多余的，已经删掉了。
• 添加刷新方法：在$.each循环结束后，调用$dataList.listview("refresh");——这一步是让jQuery Mobile重新扫描ListView的内容，把样式、分隔符等效果应用到新添加的列表项上。
• 修正属性引号：你原来的data-autodividers=true"少了开头的引号，改成data-autodividers="true"避免HTML语法错误。

补充提示 #

如果你的JSON加载是异步的（本来就是），一定要确保刷新方法是在所有列表项都添加完成后才调用——也就是放在$.each的外面，getJSON回调函数的内部，这样才不会出现部分内容没被渲染的情况。

内容的提问来源于stack exchange，提问作者Gavin Soady