JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<h2>
  MS (Always living on the) Edge Test
</h2>

<svg>
  <defs>
    <g id="hoverMe">
      <text y="50">
        Can you detect a mouseenter or click on me?
      </text>
    </g>
  </defs>
 
  <use class="component" x="10" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hoverMe"></use>
</svg>

CSS

svg {
  height: 350px;
  width: 350px;
  background-color: red;
}

#hoverMe {
  fill:white; 
}

JavaScript

$(document).ready(function() {
	$('body').on('click', 'use.component', function() {
  	$('body').prepend('<h5>Delegated binding, IE doesnt like me.</h5>');
  });
});


// THIS WORKS
$(document).ready(function() {
	$('use.component').on('click', function() {
  	$('body').prepend('<h5>At least the direct binding works.</h5>');
  });
});