jQuery 追加问题：没有图标

如何解决jQuery 追加问题：没有图标

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

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 但尚未成功。

解决方法

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

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

feather.replace(); // display the icons