title: D3 DataMaps: OnClick Events on Bubbles
body: <p>I am following the datamaps docs and I am trying to set an onClick listener to the bubbles I am rendering on the svg. Now, the <em>svg div</em> has the following sub tags:</p>
  
  <pre><code>&lt;svg&gt;
    &lt;g id class="datamaps-subunits"&gt;..&lt;/g&gt;
    &lt;g id class="bubbles"&gt;..&lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The docs say this should be done in the following way, for the countries listed on the map:</p>
  
  <pre><code>done: function(datamap) {
              datamap.svg.selectAll('.datamaps-subunits').on('click', function() {
                alert("hello");  
              });
          }
  </code></pre>
  
  <p>And this works fine, while trying to click on particular regions on the map.</p>
  
  <p>Trying to attach the same listener to <em>bubbles</em> class does nothing..</p>
  
  <pre><code>done: function(datamap) {
              datamap.svg.selectAll('.bubbles').on('click', function() {
                  alert("hello"); 
              });
          }
  </code></pre>