Javascript 试图通过JSON文件加载内容，但失败了'；不要单独加载克隆

下面是我想要克隆的

（并用JSON文件填充）：

最后，这里是javascript：

    var new_event = function(name, date, text, id){
    var events = $("#events").clone();

    $(events).attr('id',id)
    $(events).find('h4').html(name);
    $(events).find('#event_p1').html(date);
    $(events).find('#event_p2').html(text);

    return events;
  }

  var copy_div = function(){  }

  var loadEvents = function(d){
    $.each(d, function(i){
      var id = "event_" + i;
      var name = "<h4>" +d[i].titl + "</h4>";
      var date = "<p><storng>Date: </strong>" + d[i].date + "</p>";
      var text = "<p><strong>More info: </strong>" + d[i].stuff + "</p>";

      $("#events").append(new_event(name,date,text,id));
    })
  }
    //retrieves the appropriate events JSON file
    $.getJSON('data/events.json', loadEvents);
    copy_div();

var new\u event=函数（名称、日期、文本、id）{
var events=$（“#events”）.clone（）；
$（events.attr（'id'，id）
$（events.find（'h4'）.html（name）；
$（events.find（'#event_p1'）.html（date）；
$（events.find（'#event_p2'）.html（文本）；
返回事件；
}
var copy_div=function（）{}
var loadEvents=函数（d）{
$。每个（d，功能（i）{
var id=“event_u”+i；
var name=“”+d[i]。titl+”；
var date=“日期：”+d[i].日期+”
”；
var text=“更多信息：”+d[i].stuff+“
”；
$（“#事件”）.append（新的#u事件（名称、日期、文本、id））；
})
}
//检索相应的事件JSON文件
$.getJSON（'data/events.json'，loadEvents）；
复制_div（）；

目标是将JSON文件中的数据加载到我上面链接的html克隆的适当位置。出于某种原因，它不断地将div加载到另一个div中，这样看起来就像

---

请注意它们是如何被无休止地放在一起的。

看来我已经解决了这个问题。哎呀，愚蠢的错误

如果您在上面查看，

$（“#事件”）.append（新的#u事件（名称、日期、文本、id））

正在使用我最初克隆的

id=“events”

将事件加载到元素中。为了让它们作为单独的块加载，函数需要将它们附加到另一个具有另一个id的元素。因此，我在原始元素周围添加了一个

，并让函数将它们吐出

很有趣

[
    {
        "id": 2,
        "titl": "etc",
        "date": "September 4, 2013",
        "stuff": "blah blah blah blah"
    },
    {
        "id": 3,
        "titl": "etc",
        "date": "September 4, 2013",
        "stuff": "blah blah blah blah"
    },
    {
        "id": 4,
        "titl": "etc",
        "date": "September 4, 2013",
        "stuff": "blah blah blah blah"
    }
]

    var new_event = function(name, date, text, id){
    var events = $("#events").clone();

    $(events).attr('id',id)
    $(events).find('h4').html(name);
    $(events).find('#event_p1').html(date);
    $(events).find('#event_p2').html(text);

    return events;
  }

  var copy_div = function(){  }

  var loadEvents = function(d){
    $.each(d, function(i){
      var id = "event_" + i;
      var name = "<h4>" +d[i].titl + "</h4>";
      var date = "<p><storng>Date: </strong>" + d[i].date + "</p>";
      var text = "<p><strong>More info: </strong>" + d[i].stuff + "</p>";

      $("#events").append(new_event(name,date,text,id));
    })
  }
    //retrieves the appropriate events JSON file
    $.getJSON('data/events.json', loadEvents);
    copy_div();