title: Can't do a click event on an SVG path element
body: <p>I have a script that generates a map with colors on it. I am trying to have an event happen when I click on one of the states - this is using jvectormap.</p>
  
  <p>However, for some reason it doesn't work. I try it on other elements, and the click event works fine. How do I get a click event to work with a path element?</p>
  
  <pre><code>$(function() {
      var generateColors = function() {
        var colors = {},
            key; 
        for (key in map.regions) {
            values.green.forEach(function(item, i) {
               colors[item] = "#2eb02e";
            });
            values.red.forEach(function(item, i) {
               colors[item] = "#ba0707";
            });
            values.yellow.forEach(function(item, i) {
               colors[item] = "#d2d207";
            });
         }
        return colors;
       },
       map = new jvm.Map({
               map: 'us_lcc_en',
               container: $('#map'),
               series: {
                     regions: [{
                        attribute: 'fill'
                     }]
                 }
              });
      map.series.regions[0].setValues(generateColors());
  });
  </code></pre>
  
  <p>AND:</p>
  
  <pre><code>$("path").click(function() {
       console.log("blah blah blah");
  });
  </code></pre>
  
  <p>Preferably the solution would be using jQuery.</p>