jQuery Events and SVG

Question

I have the below HTML structure. Inside each g tag is a rect tag and I'm trying to add click events in jQuery for the rect objects.

<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>

The odd part is I can get a click event for the SVG tag. I can't get the g tags to fire any events at all no matter what selectors I use, I've tried the straight tag names, class names and mix and match of each. I have used click events before with svg for line tags inside of an svg, but there was no g tag for those.

So my real questions are 1. How do I get around this? 2. What about the g tag throws off jQuery?

Vincenzo Vincenzo · Accepted Answer · 2014-07-01T19:21:41

Why not just adding 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)};
}

Here's a fiddle http://jsfiddle.net/nCK7R/2/

jQuery Events and SVG

2 Answers