javascript - MS Edge can't detect delegated events for <use> SVG elements? -

i think i've found troubling bug ms edge impacts on dynamically created svg <use> elements. edge seems able detect directly bound events, i.e. $('.use').on('click', ...), delegated events $('body').on('click', 'use', ...) ignored.

it illustrated js fiddle (tested in chrome, both bindings in work , in edge delegated binding doesn't work):
https://jsfiddle.net/lr0arahb/

does have insight on issue, , knows of possible workaround? foremost, i'm looking solution can still use <use> elements it's imperative our spa.

i have found edge 13. it's definetly hack rather solid solution work around put svg in container , used transparent pseudo-element cover svg. way pseudo-element gets click rather svg.

example svg icon used in 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 pseudo-element relative parent element */   position: relative; }  .close:after {   /* cover button pseudo-element svg can't clicked */   content: '';   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0; } 

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