javascript - addeventlistener to <div> appended in d3 - Stack Overflow

admin管理员组

文章数量:1404924

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")
    })
  } 
})

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")
    })
  } 
})

• javascript
• events
• d3.js
• addeventlistener

Share Improve this question Follow edited Dec 17, 2014 at 5:19 shankar.parshimoni 1,29955 gold badges2323 silver badges4242 bronze badges asked Dec 16, 2014 at 7:48 user3562812user3562812 1,83955 gold badges2424 silver badges3232 bronze badges 2

• First, in svg we use <g> instead of <div> – huan feng Commented Dec 16, 2014 at 7:55
• I am specifically not using svg elements in my code. – user3562812 Commented Dec 16, 2014 at 7:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptaddeventlistener to ltdivgt appended in d3Stack Overflow