ko.mapping with template foreach

http://stackoverflow.com/questions/10149239/knockoutjs-and-mapping-plugin-specific-logic-on-data-update-using-template-after

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div>
    <svg height="200" width="200" style="background-color:yellow" >
        <circle r="20" cx="100" cy="100" fill="red" data-bind="event :{click: myFunc}"/>
    </svg>
</div>
 <input type="button" value="generate circle" onclick="newCircle()"/>
<p>Generate new circle and try to click on that. Why knockout binding is not working for the same ?</p>

JavaScript

var i=0;

function newCircle(){
    
    i= i+25;
var svg= d3.select("svg");
  var g=  svg.append("g");
    g.attr('data-bind','event:{click : myFunc}')
          .append('ellipse')
              .attr('cx', 10)
              .attr('cy', i)
              .attr('rx',10).attr('ry', 10)
              .attr('fill', '#E6FF97')
              .attr('stroke', 'green')
}

var viewModel = {
        
        myFunc : function() { 
            alert("bind sucessfully");
            
        }
    };
ko.applyBindings(viewModel);