jQuery事件和SVG

我有下面的HTML结构。每个g标记中都有一个rect标记，我试图在jQuery中为rect对象添加click事件

<svg id="industryChart" class="chart" width="760" height="400">
    <g transform="translate(0,0)" class="dataItem">
        <rect x="380" width="379.99999999999994" height="39" fill="steelblue"                       id="Information Technology and Services"></rect>
        <text x="740" y="15" dy=".75em" fill="white" style="opacity: 1;">49</text>
        <text x="94" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Information    Technology and Services</text></g>
    <g transform="translate(0,40)" class="dataItem">
        <rect x="380" width="279.1836734693877" height="39" fill="steelblue" id="Computer Software"></rect>
        <text x="639.1836734693877" y="15" dy=".75em" fill="white" style="opacity: 1;">36</text>
        <text x="228" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Computer Software</text></g>
    <g transform="translate(0,80)" class="dataItem">
        <rect x="380" width="271.4285714285714" height="39" fill="steelblue" id="Financial Services"></rect>
        <text x="631.4285714285713" y="15" dy=".75em" fill="white" style="opacity: 1;">35</text>
        <text x="241" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Financial Services</text></g>
    <g transform="translate(0,120)" class="dataItem">
        <rect x="380" width="209.38775510204079" height="39" fill="steelblue" id="Marketing and Advertising"></rect>
        <text x="569.3877551020407" y="15" dy=".75em" fill="white" style="opacity: 1;">27</text>
        <text x="179" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Marketing and Advertising</text></g>
    <g transform="translate(0,160)" class="dataItem">
        <rect x="380" width="193.87755102040816" height="39" fill="steelblue" id="Management Consulting"></rect>
        <text x="553.8775510204082" y="15" dy=".75em" fill="white" style="opacity: 1;">25</text>
        <text x="196" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Management Consulting</text></g>
    <g transform="translate(0,200)" class="dataItem">
        <rect x="380" width="116.32653061224488" height="39" fill="steelblue" id="Internet"></rect>
        <text x="476.3265306122449" y="15" dy=".75em" fill="white" style="opacity: 1;">15</text>
        <text x="319" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Internet</text></g>
    <g transform="translate(0,240)" class="dataItem">
        <rect x="380" width="100.81632653061223" height="39" fill="steelblue" id="Accounting"></rect>
        <text x="460.81632653061223" y="15" dy=".75em" fill="white" style="opacity: 1;">13</text>
        <text x="289" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Accounting</text></g>
    <g transform="translate(0,280)" class="dataItem">
        <rect x="380" width="77.55102040816325" height="39" fill="steelblue" id="Nonprofit Organization Management"></rect>
        <text x="437.55102040816325" y="15" dy=".75em" fill="white" style="opacity: 1;">10</text>
        <text x="104" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Nonprofit Organization Management</text></g>
    <g transform="translate(0,320)" class="dataItem">
        <rect x="380" width="77.55102040816325" height="39" fill="steelblue" id="Public Relations and Communications"></rect>
        <text x="437.55102040816325" y="15" dy=".75em" fill="white" style="opacity: 1;">10</text>
        <text x="91" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Public Relations and Communications</text></g>
    <g transform="translate(0,360)" class="dataItem">
        <rect x="380" width="62.04081632653061" height="39" fill="steelblue" id="Online Media"></rect>
        <text x="422.0408163265306" y="15" dy=".75em" fill="white" style="opacity: 1;">8</text>
        <text x="276" y="15" dy=".75em" fill="steelblue" style="opacity: 1;">Online Media</text></g>
</svg>

奇怪的是，我可以获得SVG标记的单击事件。我根本无法让g标签触发任何事件，不管我使用什么选择器，我已经尝试了直接的标签名、类名以及每个标签的混合匹配。我以前在svg中使用click events作为svg内部的行标记，但是没有用于这些行标记的g标记

所以我真正的问题是 1.我该怎么做？ 2.那么jQuery中的g标记呢？

用锚点包装元素：

<svg id="industryChart" class="chart" width="760" height="400">
    <a href="#"><g transform="translate(0,0)" class="dataItem"></a>
    ...

---

我已经实现了这里描述的SVG图像映射，并对其应用了引导弹出窗口：

为什么不只添加onclick

var svg = document.getElementById("industryChart");
var rect = svg.getElementsByTagName("rect");

for (i = 0; i < rect.length; i++) {   
    rect[i].onclick=function(){alert(this.id)};
}

---

这是一把小提琴

谢谢你的帮助。有人知道未来的jQuery是否会很好地使用SVG吗？