javascript - addeventlistener to <div> appended in d3 -

i trying add events (addeventlistner) multiple elements appended d3.however, when click on , won't trigger attached "alert".interestingly, works on <div> manually add inside .could shed light on this?

d3.csv("output1.csv",function(data){     var width = 700,     height = 600;    d3.select('body').selectall("div")     .data(data)     .enter()     .append("div")     .style("width",30)     .style('height',30)     .style("background-color",function(d){         return d.color; })  var divs = document.getelementsbytagname("div") // returns array of div elements     function show(){         alert("ya")     }    (var = 0; < divs.length; i++) {             divs[i].addeventlistener('click',function(){         alert("yaho")     })   }  }) 

since using d3, use d3 event listeners shown below.

var divs = d3.select('body').selectall("div")         .data(data)         .enter()         .append("div")         .style("width",30)         .style('height',30)         .style("background-color",function(d){             return d.color;         });  divs.on("click",function(){           alert("yaho")                    }); 

or

function show(){    alert("hi"); }  divs.on("click",show); 

listeners bonded addeventlisteners work. here working fiddle using similar code. jsfiddle