javascript - 使用innerHTML时不显示羽毛图标或Font-awesome图标

Question

我正在使用羽毛图标和很棒的字体。我正在使用 ajax 和 insideHTML 生成一个下拉元素。我的问题是我可以生成下拉菜单，但图标没有显示。 innerHTML 函数是否会干扰图标的初始化？如果是这样，我可以使用什么替代方案？

这是我的示例代码:

HTML 代码:

<div class="col-lg-12 btn-grp-hidden" id="btn-grp"></div>

Javascript代码:

$.ajax({
    url: 'generate-loan-application-btn-grp.php',
    method: 'POST',
    dataType: 'TEXT',
    data: {clientid : clientid, name : name, status : status, applno : applno, effectiveyield : effectiveyield, term : term, repaymentamt : repaymentamt, amtfinanced : amtfinanced, frequency : frequency, firstname : firstname, lastname : lastname, middlename : middlename},
    success: function(response) {
        document.getElementById("btn-grp").innerHTML = response;
    }
});

PHP 代码:

$response = '<div class="btn-group dropdown dropdown-triangle">
<button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="text">Right-aligned menu</span>
    <span class="icon"><span data-feather="chevron-down" class="rui-icon rui-icon-stroke-1_5"></span></span>
</button>
<ul class="dropdown-menu dropdown-menu-right nav">
    <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
    <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
    <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
</ul>
</div>';

echo $response;

Answer 1

你能在 html 中找到你的羽毛图标标签吗？

如果是，则将您的feather.replace()放入

$(document).ready(function() { 
feather.replace() 
})

$(document).ready(function() {
  let response = `<div class="btn-group dropdown dropdown-triangle">
<button class="btn btn-brand btn-long dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="text">Right-aligned menu</span>
    <span class="icon"><span data-feather="chevron-down" class="rui-icon rui-icon-stroke-1_5"></span></span>
</button>
<ul class="dropdown-menu dropdown-menu-right nav">
    <li><a class="nav-link" href="#"><span data-feather="plus-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Action</span><span class="rui-nav-circle"></span></a></li>
    <li><a class="nav-link" href="#"><span data-feather="x-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Another action</span><span class="rui-nav-circle"></span></a></li>
    <li><a class="nav-link" href="#"><span data-feather="check-circle" class="rui-icon rui-icon-stroke-1_5"></span><span>Something else here</span><span class="rui-nav-circle"></span></a></li>
</ul>
</div>`;
  console.log(response);
  document.getElementById("btn-grp").innerHTML = response;
  feather.replace()
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<div class="col-lg-12 btn-grp-hidden" id="btn-grp"></div>