jQuery附加问题:没有图标

Question

我正在处理我的第一个jQuery页面，并为此从服务器获取结果，然后用元素填充列表。在尝试获取之前，我只是模拟了服务器调用，并试图在一个jQuery循环中运行for追加，如下所示：

for (var j = 0; j < 9; j++) {
  // TODO: FILL THE  LIST ELEMENTS and fix icons.
  $("#active-items-tab").append(
    `<div class="list-view-item">
      <div class="list-view-item-inner">
        <div class="meta-left">
        </div>
        <div class="meta-right">
          <div class="buttons">
            <button class="button h-button is-primary is-outlined is-raised">
              <i data-feather="edit"></i>
            </button>
            <button class="button h-button is-primary is-outlined is-raised">
              <i data-feather="dollar-sign"></i>
            </button>
          </div>
        </div>
      </div>
    </div>`
  );
}

元素被正确地显示了9次，但是图标根本没有出现。以前，当我让它在HTML中复制和粘贴几次时，图标就出现了。我已经检查了是否遗漏了任何引语，并且不相信，因为它只是从我以前在HTML中的位置复制和粘贴的。

迭代有可能是干扰的吗？我认为变量名i可能会干扰到j，但还没有成功。

Answer 1

根据Feather的文档，您需要在向DOM添加一个新的<i />图标元素之后调用replace()方法。因此，您需要在for循环完成后添加这一行：

for (var j = 0; j < 9; j++) {
  $("#active-items-tab").append(/* html here... */);
}

feather.replace(); // display the icons