等待 Font Awesome JS 在绑定之前将 i 转换为 svg答案

【问题标题】：Wait for Font Awesome JS to convert i to svg before binding等待 Font Awesome JS 在绑定之前将 i 转换为 svg
【发布时间】：2018-08-07 09:40:41
【问题描述】：

在绑定到由 Font Awesome JS <i> 到 <svg> 生成的 Font Awesome 元素时，我遇到了一些问题。

我正在尝试使用 tooltipster 将自定义 HTML 元素附加到我的 Laravel 5 应用程序中的 <i> 标记，如下所示

刀片

<i class="fa fa-ellipsis-h doc-settings room-image-settings-tooltip" data-tooltip-content="#room_image_settings_{{$key}}" aria-hidden="true"></i>

//Tooltip enable
$('.room-image-settings-tooltip').tooltipster({
    theme: 'tooltipster-punk',
    trigger: 'click',
    animation: 'grow',
    minWidth: 300,
    interactive:true,
    animationDuration:200
});

这会导致 Font Awesome 创建这样的 SVG

如您所见，效果很好。它接管了所有属性。问题是，如果没有 font awesome 5，当它保留为 <i> 元素时，它绑定得很好，但是当它转换为 <svg> 时，即使上面的 tooltipster js 位于文档就绪标签内，tooltipster 代码必须在控制台中重新运行才能使其工作并绑定到<svg>。

我的 JS 正在按此顺序加载

app.js

require('@fortawesome/fontawesome-pro/js/all');

$(document).ready(function(){
   //Tooltip enable
   $('.room-image-settings-tooltip').tooltipster({
       theme: 'tooltipster-punk',
       trigger: 'click',
       animation: 'grow',
       minWidth: 300,
       interactive:true,
       animationDuration:200
   });
});

那么肯定 Font Awesome 应该在 tooltipster 代码之前运行并且它应该正确绑定到新的 SVG 元素？

我弄错了吗？ <i> 到 <svg> 代码在文档就绪标记中运行，并且在我自己的 app.js 文件之后运行？

我如何监听 SVG 何时完成转换并运行 JS？

【问题讨论】：

标签： javascript svg font-awesome font-awesome-5

【解决方案1】：

我不知道为什么这个问题被否决了，因为它是一个合法的问题，而且 Font Awesome 有专门的听众。在联系了 font awesome 5 的支持人员后，他们将我引导至文档以收听完成的 <i> 到 <svg> 转换 here。

【讨论】：