Raphaeljs Click Event on image not working in IE9

Question

In the following piece of code, the first click event fires, but the rest do not - in IE 9. It works fine in Chrome and Firefox (and evidently IE 8 - although I have not tested it)

$(document).ready(function () {
    var d = paper.image("/Content/images/male.png", 100, 100, 32, 32);
    d.click(function (event) {
        alert(this.node);
    });

    $.each(hierarchy.children, function (index, value) {
        DrawNode(paper, value);
    });
})

function DrawNode(paper, currentPerson) {
     var currentNode = paper.image("/Content/images/male.png", currentPerson.X, currentPerson.Y, 32, 32).attr({ stroke: "none", fill: "none" });
     currentNode.click(function (event) {
         alert(this.node);
      });
    }

In IE9, clicking on the root node shows [object SVGImageElement] - the other nodes the event doesn't fire. In the other browsers, you get the same (SVGImageElement) for all the nodes

Answer 1

This is a temporary work around for anyone who is looking. You can put a square, circle or any other vector behind your image and bind the events to that.

In IE9 it works by clicking on the shape behind the image - on all other browsers, the image event fires.