delegate on inline SVG with < use > element throws error

[desandro]

See ​http://jsfiddle.net/desandro/SawTC/

With an event delegate on an inline SVG, you can click on the orange circle, which was rendered with <circle> element, but clicking on the red or blue circle throws an error. The red and blue circle are rendered with <use> . The error is

Uncaught TypeError: Cannot call method 'toLowerCase' of undefined
jquery-1.7.1.js:2827

About <use>: It allows you to define a shape and re-use it multiple times without having to define it again. ​http://www.w3.org/TR/SVG/struct.html#UseElement

If I inspect the red or blue circle, I can get its nodeName from the reference element #my-circle.

[desandro]

Browsers, tested on Mac OSX 10.7.3

+ occurs in Chrome 18 + occurs in Safari 5.1.3 + no error in Firefox 10, this is always the svg element + occurs in Opera 11.61

in jQuery 1.6.4, No error is thrown, but no click event is triggered when clicking the <use> elements

---

Hack/Fix is to set CSS

svg use { pointer-events: none; }

[sindresorhus]

​http://docs.jquery.com/Won%27t_Fix#SVG.2FXML.2FVML_Bugs