Javascript D3数据映射：气泡上的OnClick事件

我正在关注datamaps文档，并尝试将onClick侦听器设置为在svg上呈现的气泡。现在，svg div有以下子标记：

<svg>
  <g id class="datamaps-subunits">..</g>
  <g id class="bubbles">..</g>
</svg>

在尝试点击地图上的特定区域时，这种方法效果很好

尝试将同一侦听器附加到bubbles类没有任何作用

done: function(datamap) {
            datamap.svg.selectAll('.bubbles').on('click', function() {
                alert("hello"); 
            });
        }

---

当

done

运行时，

bubbles

尚未添加，因为

bubbles

是一个插件

newdatamap

在

svg

处返回一个带有d3选择的对象：

var map = new Datamap({...}); 
//add bubbles
map.bubbles(bubbleData);
//handle bubble clicks
map.svg.selectAll('.bubbles').on('click', function() {...});

这应该适用于第一批泡沫

如果要动态添加气泡并且不想重置侦听器，可以使用jQuery事件委派来处理动态气泡：

$(map.svg[0][0]).on('click', '.bubbles', function(e) {
  //handle click here as well
});

---

在

.bubbles

元素前面是否有其他内容导致单击事件无法通过？是否受z-index的影响？SVG中没有

z-index

，添加元素的顺序就是它们的显示顺序。

$(map.svg[0][0]).on('click', '.bubbles', function(e) {
  //handle click here as well
});