I think I've found a troubling bug with MS Edge that impacts on dynamically created SVG <use> elements. Edge seems to be able to detect directly bound events, i.e. $('.use').on('click', ...), however delegated events $('body').on('click', 'use', ...) are ignored.

It is most easily illustrated with a JS Fiddle (tested in Chrome, where both bindings in work and in Edge where the delegated binding doesn't work):
/

Does anyone have any insight on this issue, and knows of a possible workaround? Foremost, I'm looking for a solution where we can still use the <use> elements as it's imperative for our SPA.

I think I've found a troubling bug with MS Edge that impacts on dynamically created SVG <use> elements. Edge seems to be able to detect directly bound events, i.e. $('.use').on('click', ...), however delegated events $('body').on('click', 'use', ...) are ignored.

It is most easily illustrated with a JS Fiddle (tested in Chrome, where both bindings in work and in Edge where the delegated binding doesn't work):
https://jsfiddle/Lr0arahb/

Does anyone have any insight on this issue, and knows of a possible workaround? Foremost, I'm looking for a solution where we can still use the <use> elements as it's imperative for our SPA.

• javascript
• jquery
• events
• svg
• microsoft-edge

• 1 You do realize that IE11 and Microsoft Edge are two pletely separate browsers, right? – krillgar Commented Jan 27, 2016 at 15:55
• Haha, I did not, that's quite alarming, the question has been edited, this is for Edge. Thanks for clearing that up! – Anton Abilov Commented Jan 27, 2016 at 16:02

2 Answers 2

I too have found this with Edge 13. It's definetly a hack rather than a solid solution but to work around it I put the SVG in a container and used a transparent pseudo-element to cover the SVG. This way the pseudo-element gets the click rather than the SVG.

Example SVG icon used in 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.

Using pointer-events: none can solve this. Instead of applying it to the <svg> tag and attaching handlers to a container element as is mentioned in a ment, if you add pointer-events: none to the <use> itself, this prevents it from stopping event propagation, and the outer <svg> can still be receptive to mouse events.