使用 .html() 未显示图标答案

【问题标题】：Icons not showing using .html()使用 .html() 未显示图标
【发布时间】：2023-03-09 16:11:01
【问题描述】：

我正在处理显示错误消息的简单表单，我的问题是当我尝试在警报消息上添加图标时，图标没有显示。我正在使用feathericons 来生成图标。

我做了一个简单的sn-p，图标显示正常，但是当我使用jquery显示它时它不起作用。

希望你能帮助我。

谢谢。

$(document).ready(function(){
   feather.replace();
   
   $('button').click(function(){
      $('.alert').html('<i data-feather="activity"></i>');
   });
  
});

<script src="https://unpkg.com/feather-icons@4.10.0/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>show Icon</button>
<div class="alert"></div>
<hr>
<i data-feather="home"></i>
<i data-feather="alert-circle"></i>
<i data-feather="globe"></i>

【问题讨论】：

标签： jquery svg icons

【解决方案1】：

试试这个。

<script src="https://unpkg.com/feather-icons@4.10.0/dist/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>show Icon</button>
<div class="alert"></div>
<hr>
<i data-feather="home"></i>
<i data-feather="alert-circle"></i>
<i data-feather="globe"></i>

<script>
$(document).ready(function(){
   feather.replace();

   $('button').click(function(){
      $('.alert').html('<i data-feather="activity"></i>');
      feather.replace();
   });

});
</script>

【讨论】：