addeventlistener到 <div> 附加在d3中

Question

I am trying to add events (addeventlistner) to multiple elements that are appended with d3.However, when I click on , it won't trigger the attached "alert".Interestingly, this works on <div> that I manually add inside .Could anyone 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") // this returns array of div elements    
function show(){
        alert("ya")
    }   
for (var i = 0; i < divs.length; i++) {
            divs[i].addEventListener('click',function(){
        alert("yaho")
    })
  } 
})

Answer 1

Since your are using d3, use d3 event listeners as 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 with addEventListeners will also work. Here is the working fiddle using similar code. JSFiddle