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 Icons 的 documentation，您需要在向 DOM 添加新的 <i /> 图标元素后调用 replace() 方法。因此，您需要在 之后添加此行 您的 for 循环完成：

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

feather.replace(); // display the icons

jQuery 追加问题：没有图标

jQuery append issue: no icons

html

jquery

feathericons