inline SVG and jQuery delegate bug

okay to click orange <circle>, but not red or blue <use>

by desandro

HTML

<p>jQuery 1.7.1 - okay to click orange < circle >, but not red or blue < use ></p>

<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <defs>
        <circle id="my-circle" cx="50" cy="50" r="50" />
    </defs>
    <circle fill="orange" cx="50" cy="150" r="30" />
    <use fill="red" xlink:href="#my-circle" />
    <use fill="blue" xlink:href="#my-circle" transform="translate(125, 25) scale(0.5)" />
</svg>

CSS

svg {
  border: 1px solid;
}

JavaScript

$( function(){

    $('body').delegate( 'svg', 'click', function(){
        console.log( this );
    });

});