为什么jquery / javascript在jquery移动listview中创建重复的列表项？

Question

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

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

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

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

我的问题可能类似于在刷新页面时添加重复项的jQuery Mobile列表中的jQuery .append（）JSON数据中描述的问题吗？ 。 但是提供的唯一解决方案并不能防止重复，它们仅说明了如何过滤掉重复项。 看来效率低下。

这是我的javascript（[实时版本]（ 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"
   }
]

Answer 1

您的<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源。