使用d3的數據方法將事件綁定到動態生成的內容js庫

我試圖將click事件綁定到使用d3.js使用數據動態生成的元素。使用d3的數據方法將事件綁定到動態生成的內容js庫

d3.select("#mylist").selectAll('li').data(data_arr).enter().append("li").html(
     function(d) 
     { 
      var element = document.createElement('div'); 
      element.innerHTML = '<div id="innerDiv"></div>'; 

      var divToClick = element.querySelector('#innerDiv'); 
      //Using jquery to get cross browser event binding 
      $(divToClick).click(function(){ 
       alert('hello!'); 
      }); 



      return element.innerHTML; 
     });

我知道，問題是，我返回一個字符串（innerHTML的），但如果我返回元素它不工作。任何幫助？

（真正的代碼要複雜得多，我只是在這裏複製了重要的部分）。

來源

2012-05-22 Tony

這裏就是答案。

var li_arr = d3.select("#mylist").selectAll('li').data(data_arr).enter().append("li").html(
    function(d) 
    { 
     var element = document.createElement('div'); 
     element.innerHTML = '<div id="innerDiv"></div>'; 
     return element.innerHTML; 
    }); 

li_arr.select('#innerDiv').each(function(d,i) 
     { 
      var mydiv = d3.select(this); 
      mydiv.on('click',function(){ 
       alert('hello'); 
      }); 
     });

來源

2012-05-22 21:01:06 Tony

這樣做的更D3的辦法是

d3.select("#mylist").selectAll('li').data(data_arr).enter() 
    .append("li") 
    .append("div") 
    .on("click", function() { alert("hello!"); });

來源

2012-05-22 19:05:17

我在我的「李」裏面不只有一個div。這只是一個例子。我有一個更復雜的結構。這不是一個好的選擇。 – Tony

您可以嘗試在您使用d3創建的外部元素上使用'.on'函數。您的描述既沒有明確指出問題所在，也沒有顯示確切的代碼 - 這使得很難弄清楚你實際想要達到什麼以及如何去做。 –

我想將點擊事件綁定到返回的innerHTML中包含的元素。 – Tony

使用d3的數據方法將事件綁定到動態生成的內容js庫

回答

相關問題