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

Question

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

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

Blade

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

JS

//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 在文档就绪标签中, 控制台中的工具提示代码必须是 re-ran 才能使其工作并绑定到 <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 应该运行ning 在工具提示代码之前并且它应该正确绑定到新的 SVG 元素？

我理解错了吗？在深处的某处是文档就绪标签中的 <i> 到 <svg> 代码运行并且它运行在我自己的 app.js 文件之后？

我如何监听 SVG 何时完成转换，然后运行 JS？

Answer 1

我不知道为什么这个问题被否决了，因为它是一个合理的问题，而且 Font awesome 有专门的听众。在联系了 font awesome 5 的支持后，他们指示我查看文档以侦听已完成的 <i> 到 <svg> 的转换 here.

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

Wait for Font Awesome JS to convert i to svg before binding

javascript

svg

font-awesome

font-awesome-5