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

Question

我正在尝试通过构建一个获取json文件并从中加载数据的简单Web应用来提高我的 JQueryMobile \ JavaScript 技能它变为可点击的listview。

目标是通过使用li点击其中一个data-role="button"元素，然后使用data-rel="dialog"以对话框页面的形式打开新页面属性+附加应使用id打开的新页面的<a href="#newPage" data-rel="dialog"></a>。 我遇到两个问题：

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

   < / LI>

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

更新 - 感谢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');
        }