动态添加的生动图标的问题

Question

我想在我的项目中使用Vivid 图标。它一直有效，直到我想动态添加它。我猜没有事件处理程序可以将 <i/> 标签实际更改为 <svg/>。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10" type="text/javascript"></script>

  <p>Here is a bag</p>

  <i data-vi="bag"></i>

  <p>Now add a box</p>

  <button id="add" type="button">Add a box</button>

  <script>

    

    $("#add").click(function(){

      $("body").append("<p>added, but where it is?</p>");

      $("body").append('<i data-vi="bag"></i>');

    });

    

  </script>

有没有办法在添加图标'<i data-vi="bag"></i>'后触发vivid-icons.js中的功能？

Answer 1

这可能是生动库中的错误，但您可以使用 ajax 获取生动并在每次添加另一个图标时运行它。<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>&nbsp; <script src="https://code.jquery.com/jquery-3.1.0.js"></script>&nbsp; <p>Here is a bag</p>&nbsp; <i data-vi="bag"></i>&nbsp; <p>Now add a box</p>&nbsp; <button id="add" type="button">Add a box</button>&nbsp; <script>&nbsp; &nbsp; var vivid&nbsp; &nbsp; if (!vivid) {&nbsp;&nbsp; &nbsp; &nbsp; $.get('https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10', function (script) {&nbsp; &nbsp; &nbsp; &nbsp;vivid = function () { eval(script) }&nbsp; &nbsp; &nbsp; &nbsp;vivid()&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $("#add").click(function(){&nbsp; &nbsp; &nbsp; $("body").append("<p>added, but where it is?</p>");&nbsp; &nbsp; &nbsp; $("body").append('<i data-vi="bag"></i>');&nbsp; &nbsp; &nbsp; vivid()&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; </script>或者如果您想自己更改库，您可以添加 window.vivid 行，然后每次添加另一个图标时，只需在此之后运行vivid()："loading" !== document.readyState ? v() : document.addEventListener("DOMContentLoaded", (function() {&nbsp; &nbsp; v()}))window.vidid = v