d3 circle onclick event not firing
<p>I'm starting with svg and I have created the following markup.</p>

<pre><code>&lt;svg width="500" height="600" class="graph-container"&gt;
  &lt;g&gt;
    &lt;rect x="150" y="190" height="50" width="200" rx="30" ry="30" nodeId="1" children="3" style="fill: none; stroke: rgb(68, 68, 68);"&gt;&lt;/rect&gt;
    &lt;text x="250" y="220" text-anchor="middle" fill="#444" style="font-size: 24px;"&gt;root&lt;/text&gt;

  &lt;/g&gt;

&lt;/svg&gt;
</code></pre>

<p>I have added a small circle into the larger rectangle through d3js.</p>

<pre><code>$( document ).ready(function() {

var node = d3.select('g');
var addchild = node.append("circle")
            .attr("cx",320)
            .attr("cy",210)
            .attr("r",10)
            .attr("class","addchild")
            .style("fill","none")
            .style("stroke","#444");

            addchild.on("click", function() {
                alert("on click");
            });; 

});
</code></pre>

<p>but the click event is not firing.</p>

<p>Here is the <a href="https://jsfiddle.net/rmmbzk3a/" rel="noreferrer">jsfiddle</a> of the same.</p>