MS Edge cannot detect delegated events for <use> SVG elements?

Question

I think I found an alarming error with MS Edge that affects dynamically generated SVG <use> elements. The edge seems to be able to detect directly related events, i.e. $('.use').on('click', ...) , however the delegated events of $('body').on('click', 'use', ...) ignored.

This is easiest to illustrate using JS Fiddle (tested in Chrome, where both bindings work and in Edge, where delegated bindings don't work):
https://jsfiddle.net/Lr0arahb/

Does anyone have an understanding of this problem and is aware of a possible workaround? First of all, I'm looking for a solution in which we can still use the <use> elements, since this is necessary for our SPA.

Answer 1

I also found this with Edge 13. This is definitely a hack, not a solid solution, but to get around it I put SVG in a container and used a transparent pseudo-element to cover the SVG. Thus, the pseudo-element receives a click, not an SVG.

An example of an SVG icon used by a button:

 <button class="close" type="button"> <svg role="img" class="icon icon--close"> <use xlink:href="icons.svg#close" /> </svg> </button> 

CSS fix:

 .close { /* Make it so the pseudo-element is relative to this parent element */ position: relative; } .close:after { /* Cover the button with a pseudo-element so the SVG can't be clicked */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

You can use :before or :after pseudo-elements.