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

Question

I am trying out the code in this fiddle . It just contains a font-awesome icon, clicking which is supposed to show a simple alert. It works fine on Vivaldi, Safari and Chrome. However, on Edge, it is extremely flaky, often not registering the click and not alerting, although sometimes it does.

Is there any Edge specific problem regarding font-awesome icons? Is there any known fix for this, if so?

The code:

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

Answer 1

Read: https://www.chromestatus.com/feature/5148698084376576
Don't use alert() use rather console.log()

Tl;Dr :
Seems Edge conforms with the Remove alert() feature receipt - when an alert if started from an origin different that the page embedding it. jsfiddle.net uses an iframe (to show the code panes) with a slightly different origin: fiddle.jshell.net .
Why is not the same for Chrome (both being on Chromium) - I'm not sure at this point.

Another issue might be (inspect element to see de-facto) - that fas icons JS library for some stupid nonsensical reason removes (comments out <!-- --> ) the original i tag and replaces it with a brand new <svg> but copyes the original className (ie: .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> -->

In such case what could happen is that your click is bound to a now non-existent element .

• Your <i class="scoreCardExpand"> get commented out
• Your JS tries to assign click to .scoreCardExpand (that does not exists)
• Font awesome creates a <svg class="scoreCardExpand"
• The click event does not work.

The only other viable solution I would try is to assign the click event to some <i> 's parent element ,
or to use click handler with delegation:

jQuery(function($) {

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

});