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 awesome 创建 <svg class="scoreCardExpand"
点击事件不起作用。

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

jQuery(function($) {

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

});

jQuery 点击超赞字体图标未在所有浏览器中一致注册

jQuery click on font-awesome icon not registering consistently in all browsers

javascript

jquery

font-awesome