0

我正在尝试构建一个 JQuery Mobile 列表视图（基于入门指南）。列表项由 json 数据填充。

它基本上正在工作。该列表正在创建并正确设置样式。但该列表包括重复项。只有 2 个 json 对象，但列表包括四个项目。最后两个是前两个的重复。

我已经仔细检查了 json 数据并将变量输出到控制台。两者都只包含两个对象，没有重复。

为什么这个 jquery/javascript 在列表视图中创建重复的列表项？如何防止重复？

我的问题可能类似于jQuery Mobile 列表中的 jQuery .append() JSON 数据在刷新页面时添加重复项中描述的问题？. 但是提供的唯一解决方案并不能防止重复，它们只解释了如何过滤掉重复。这似乎是一个低效的组合。

这是我的 javascript ([live version] ( http://dev.mycourtdates.com/jq.html ))::

<!DOCTYPE html>
<html>
<head>
    <title>J 2.1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="content">
        <ul id = "myList" data-role="listview" data-inset="true" data-filter="true">
            <script>
            $.getJSON("http://dev.mycourtdates.com/jsonData.txt?",
                {
                    id: "73125"
                },
                function(data) {
                    var items = [];

                    $.each(data, function(i,ct_setting){
                        items.push('<li><a href="#">' + ct_setting.caseNumber + '</a></li');
                    });
                    console.log(items);
                    $('#myList').append(items).listview('refresh');
                });
            </script>
        </ul>
    </div><!-- /content -->
</body>
</html>

这是我的 json 数据（[实时版本]（http://dev.mycourtdates.com/jsonData.txt））：

[
   {
      "active":"1",
      "caseNumber":"B 1102907-C",
      "timeDate":"2012-07-31 09:00:00",
      "setting":"JURY TRIAL",
      "location":"H.C. COURT HOUSE ROOM 320",
      "plaintiffs":"STATE OF OHIO",
      "defendants":"EDWARD L HOGAN",
      "attorneyId":"PP68519"
   },
   {
      "active":"",
      "caseNumber":"B 1200563",
      "timeDate":"2012-08-06 09:00:00",
      "setting":"JURY TRIAL",
      "location":"H.C. COURT HOUSE ROOM 320",
      "plaintiffs":"STATE OF OHIO",
      "defendants":"RONALD SILER ",
      "attorneyId":"PP68519"
   }
]
4

1 回答 1

0

您的<script>标签位于无效位置。

这个jsfiddle正在工作：

<div data-role="content">
    <ul id = "myList" data-role="listview" data-inset="true" data-filter="true">
    </ul>
</div>

以下 Javascript 应放置在<script>标题中的标记中。

$(document).ready(function() {
    $.getJSON("http://dev.mycourtdates.com/jsonData.txt?",
            {
                id: "73125"
            },
            function(data) {
                var items = [];

                $.each(data, function(i,ct_setting){
                    items.push('<li><a href="#">' + ct_setting.caseNumber + '</a></li');
                });
                console.log(items);
                $('#myList').append(items).listview('refresh');
            });
});

请注意，由于上述源的访问控制标头限制，我不得不更改小提琴中的 JSON 源。

于 2013-01-12T05:29:28.907 回答