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

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>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></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>

    var vivid

    if (!vivid) { 

      $.get('https://cdn.jsdelivr.net/npm/vivid-icons@1.0.10', function (script) {

       vivid = function () { eval(script) }

       vivid()

      })

    }

    

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

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

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

      vivid()

    });

    

  </script>

或者如果您想自己更改库，您可以添加 window.vivid 行，然后每次添加另一个图标时，只需在此之后运行vivid()：

"loading" !== document.readyState ? v() : document.addEventListener("DOMContentLoaded", (function() {

    v()

}))

window.vidid = v