jQuery mobile - 从json文件加载到listview的数据在刷新后中断

Question

我正在尝试通过构建一个简单的 Web 应用程序来提高我的 JQueryMobile \ JavaScript 技能，该应用程序获取 json 文件并将其中的数据加载到可点击的文件中listview。

目标是通过使用data-role="button"单击选择li元素之一，并使用data-rel="dialog"属性+附加@987654327以对话框页面的形式打开一个新页面应该使用<a href="#newPage" data-rel="dialog"></a> 打开的新页面的@。 我面临两个问题：

1. 出于某种奇怪的原因，只有第一个 li 单元格是可点击的，而它仍然未填充，因为其他 li 单元格已填充但不可点击。

2. 刷新页面后，ul 中断并显示 one li 元素中 json 中的所有名称。

更新 - 感谢 Jithin Lukose，我能够使用以下功能处理此问题：

complete: function() {
        $('#namesListView').listview('refresh');
    }

jQuery 移动代码：

<div data-role="page" id="scientists">
    <div data-role="header"><h3>great scientists</h3></div>

    <div data-role="content">
            <div>
                <ul data-role="listview" data-inset="true" data-filter="true" id="namesListView">
                    <li data-role="button"><a href="#newPage" data-rel="dialog"></a></li>
                 </ul>
             </div>
     </div>
 </div>

javascript代码：

$.ajax({
    url:"scientists.json",
    dataType:"json",
    type:"get",
    cache:"false",
    success:function(data){
        console.log(data);
        $(data.abc).each(function(index,value){
            console.log(value.name);
            $("#namesListView").append("<li>"+value.name+"</li>");
        });
    }
});

Answer 1

试试这个答案。

https://stackoverflow.com/a/4998892/1640577

  complete: function() {
            $('#namesListView').listview('refresh');
        }