jQuery 单击字体真棒图标在所有浏览器中未一致注册

Question

我正在尝试这个fiddle 中的代码。 它只包含一个字体很棒的图标，点击它应该会显示一个简单的警报。 它在 Vivaldi、Safari 和 Chrome 上运行良好。 但是，在 Edge 上，它非常不稳定，通常不会记录点击，也不会发出警报，尽管有时会。

关于字体真棒图标是否有任何 Edge 特定问题？ 如果是这样，是否有任何已知的修复方法？

代码：

$(function() {
    $(".scoreCardExpand").on("click", function() {  
    alert(5);
  });
});

Answer 1

阅读： https : //www.chromestatus.com/feature/5148698084376576
不要使用alert()而是使用console.log()

Tl;博士：
似乎 Edge 符合Remove alert()功能接收 - 当警报从与嵌入它的页面不同的源开始时。 jsfiddle.net使用iframe （用于显示代码窗格），其来源略有不同： fiddle.jshell.net 。
为什么 Chrome 不一样（都在 Chromium 上） - 我现在不确定。

另一个问题可能是（检查元素以查看实际情况）- fas图标 JS 库出于一些愚蠢的荒谬原因删除（注释掉<!-- --> ）原始i标记并将其替换为全新的<svg>但复制原始类名（即： .scoreCardExpand ）：

<svg class="svg-inline--fa fa-chevron-circle-down fa-w-16 scoreCardExpand" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="chevron-circle-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"></path></svg>
<!-- <i class="fas fa-chevron-circle-down scoreCardExpand"></i> -->

在这种情况下，可能发生的情况是您的点击绑定到一个现在不存在的元素。

• 你的<i class="scoreCardExpand">被注释掉
• 您的 JS 尝试将点击分配给.scoreCardExpand （不存在）
• Font <svg class="scoreCardExpand"创建了一个<svg class="scoreCardExpand"
• 单击事件不起作用。

我会尝试的唯一其他可行的解决方案是将 click 事件分配给某些<i>的父元素，
或者使用带有委托的点击处理程序：

jQuery(function($) {

  $(document /* or rather some parent ID */).on("click", ".scoreCardExpand", function() {  
    console.log(5);
  });

});