Javascript list.js不处理使用$.getJSON动态创建的动态创建元素

我正在尝试使用上的list.js创建一个可排序列表。以下是我目前掌握的代码：

HTML:

FCC新闻查看器 按日期排序 按等级排序 按作者排序

Javascript:

$('document').ready(function(){
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    for (i=0; i<Object.keys(json).length; i++) {
      $('ul').append("<li class='article'><img src="+json[i].author.picture+"\><a href="+json[i].link+" class='headline'>"+json[i].headline+"</a><br><a href='http://www.freecodecamp.com/"+json[i].author.username+" class='author'>"+json[i].author.username+"</a><p class='rank_text'>"+"&hearts;"+"<span='rank'>"+json[i].rank+"</span></p><p class='date'></p></li>")
      if (i == Object.keys(json).length-1) {
        var options = {
      valueNames: [ 'date', 'rank', 'author' ]
        };
        var userList = new List('users', options);
      }
    }
  })
})

$（'document'）.ready（函数（）{
$.getJSON（“http://www.freecodecamp.com/news/hot，函数（json）{
对于（i=0；i我强烈建议不要在Javascript文件中混入任何HTML代码。您所拥有的被认为是突出的。我会在您排除嵌入Javascript中的HTML后重新定义问题，这可能会导致一些非常混乱和难以理解的代码。表示和行为的分离非常重要新界

请参阅：

以下是代码中与此相关的部分：

$('ul').append(
"<li class='article'><img src="+json[i].author.picture+"\>
<a href="+json[i].link+" class='headline'>"+json[i].headline+"</a>
<br><a href='http://www.freecodecamp.com/"+json[i].author.username+" class='author'>"+json[i].author.username+"</a>
<p class='rank_text'>"+"&hearts;"+"<span='rank'>"+json[i].rank+"</span></p><p class='date'></p></li>") 

$（'ul'）。追加(
“



“+”&hearts；“+”+json[i].rank+“
”）
我强烈建议不要在Javascript文件中混入任何HTML代码。您所拥有的被认为是突出的。在您排除了嵌入Javascript中的HTML之后，我会重新定义问题，这可能会导致一些非常混乱和难以理解的代码。表示和行为的分离非常重要新界

请参阅：

以下是代码中与此相关的部分：

$('ul').append(
"<li class='article'><img src="+json[i].author.picture+"\>
<a href="+json[i].link+" class='headline'>"+json[i].headline+"</a>
<br><a href='http://www.freecodecamp.com/"+json[i].author.username+" class='author'>"+json[i].author.username+"</a>
<p class='rank_text'>"+"&hearts;"+"<span='rank'>"+json[i].rank+"</span></p><p class='date'></p></li>") 

$（'ul'）。追加(
“



“+”&hearts；“+”+json[i].rank+“
”）
我注意到开盘和收盘报价有问题（双引号和单引号），日期也应该包含在选项中，尽管我没有发现文档中明确写了日期，但似乎排序类应该附加到li项的直接子项-这就是我的固定排序。这就是我调整您的代码笔js的方式：

$('document').ready(function(){
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    for (i=0; i<Object.keys(json).length; i++) {
      $('ul').append(
        "<li class='article'>" + 
        "<img src='" + json[i].author.picture + "' /'>" + 
        "<a href='" + json[i].link + "' class='headline'>" + 
        json[i].headline + 
        "</a><br>" + 
        "<a href='http://www.freecodecamp.com/" + json[i].author.username +
        "' class='author'>" + json[i].author.username + "</a>" +
        "<p class='rank'>&hearts;<span='rank-span'>"
        + json[i].rank + "</span></p><p></p></li>");

      if (i == Object.keys(json).length-1) {
        var options = {
          valueNames: [ 'rank', 'author' ]
        };
        var userList = new List('users', options);
      }
    }
  })
})

$（'document'）.ready（函数（）{
$.getJSON（“http://www.freecodecamp.com/news/hot，函数（json）{
对于（i=0；i我注意到开盘和收盘报价有问题（双引号和单引号），日期也应该包含在选项中，尽管我没有发现文档中明确写了日期，但似乎排序类应该附加到li项的直接子项-这就是我的固定排序。这就是我调整您的代码笔js的方式：

$('document').ready(function(){
  $.getJSON("http://www.freecodecamp.com/news/hot", function(json) {
    for (i=0; i<Object.keys(json).length; i++) {
      $('ul').append(
        "<li class='article'>" + 
        "<img src='" + json[i].author.picture + "' /'>" + 
        "<a href='" + json[i].link + "' class='headline'>" + 
        json[i].headline + 
        "</a><br>" + 
        "<a href='http://www.freecodecamp.com/" + json[i].author.username +
        "' class='author'>" + json[i].author.username + "</a>" +
        "<p class='rank'>&hearts;<span='rank-span'>"
        + json[i].rank + "</span></p><p></p></li>");

      if (i == Object.keys(json).length-1) {
        var options = {
          valueNames: [ 'rank', 'author' ]
        };
        var userList = new List('users', options);
      }
    }
  })
})

$（'document'）.ready（函数（）{
$.getJSON（“http://www.freecodecamp.com/news/hot，函数（json）{
对于（i=0；iI这样做是因为我认为它会更具动态性。如果API创建者向数组中添加了其他项，我希望它能够自动更新。有没有一种方法可以通过单独的HTML和Javascript来实现这一点？是的，这实际上是Handlebar非常有用的功能。它允许您在保持您的逻辑保存在JS函数中。因此，您的视图将通过提供的模板具有任何动态关联。例如：
将变成`
，只是为了澄清上面的第二个片段
将在视图中（HTML）我这样做是因为我认为它会更具动态性。如果API创建者向数组中添加了其他项，我希望它能够自动更新。有没有一种方法可以通过单独的HTML和Javascript来实现这一点？是的，这实际上是Handlebar非常有用的功能。它允许您分离入侵性HTML，同时保持Logic保存在JS函数中。因此，您的视图将通过提供的模板具有任何动态关联。例如：
将变为`
，只是为了澄清上述内容，第二个片段
将出现在视图中（HTML）哦！这是因为我在链接上缺少单引号。这很有意义。非常感谢！哦！这是因为我在链接上缺少单引号。这很有意义。非常感谢！