Javascript 使用d3 js库的数据方法将事件绑定到动态生成的内容

我正在尝试将click事件绑定到一个使用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;
       });

d3.select（“#mylist”）.selectAll（'li'）.data（data_arr）.enter（）.append（“li”）.html(
职能（d）
{
var-element=document.createElement（'div'）；
element.innerHTML=''；
var divToClick=element.querySelector（“#innerDiv”）；
//使用jquery获取跨浏览器事件绑定
$（divToClick）。单击（函数（）{
警惕（“你好！”）；
});
return element.innerHTML；
});

我知道问题是我正在返回一个字符串（innerHTML），但是如果我返回元素，它就不起作用了。有什么帮助吗

---

（真正的代码要复杂得多，我只是在这里复制了重要的部分）。

一种更为d3的方法是

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

---

一个更为d3的方法是

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

答案是这样的

 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');
            });
       });

var li_arr=d3.select（#mylist”）.selectAll（'li'）.data（data_arr.enter（）.append（'li'）.html(
职能（d）
{
var-element=document.createElement（'div'）；
element.innerHTML=''；
return element.innerHTML；
});
li#u arr.select（'#innerDiv'）。每个（函数（d，i）
{
var mydiv=d3。选择（此）；
mydiv.on（'click'，function（）{
警惕（“你好”）；
});
});

以下是答案

 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');
            });
       });

var li_arr=d3.select（#mylist”）.selectAll（'li'）.data（data_arr.enter（）.append（'li'）.html(
职能（d）
{
var-element=document.createElement（'div'）；
element.innerHTML=''；
return element.innerHTML；
});
li#u arr.select（'#innerDiv'）。每个（函数（d，i）
{
var mydiv=d3。选择（此）；
mydiv.on（'click'，function（）{
警惕（“你好”）；
});
});

我的“li”中不仅仅有一个div。这只是一个例子。我的结构要复杂得多。这不是一个好选项。您可以尝试在使用d3创建的外部元素上使用

.on

函数。您的描述既没有确切说明问题所在，也没有显示确切的代码——这使得您很难确定实际想要实现什么以及如何实现。我想将单击事件绑定到返回的innerHTML中包含的元素。您可以在创建它们之后选择它们，然后使用d3的

。on

方法，正如我所说，修改内部HTML的创建不是一个选项（它很复杂，并且是使用jsonp服务创建的）。我解决了迭代新创建的HTML的问题，但我认为这不是一个很好的解决方案。这应该是一个更好的方法。我的“李”里不仅仅有一个div。这只是一个例子。我的结构要复杂得多。这不是一个好选项。您可以尝试在使用d3创建的外部元素上使用

.on

函数。您的描述既没有确切说明问题所在，也没有显示确切的代码——这使得您很难确定实际想要实现什么以及如何实现。我想将单击事件绑定到返回的innerHTML中包含的元素。您可以在创建它们之后选择它们，然后使用d3的

。on

方法，正如我所说，修改内部HTML的创建不是一个选项（它很复杂，并且是使用jsonp服务创建的）。我解决了迭代新创建的HTML的问题，但我认为这不是一个很好的解决方案。这应该是一个更好的方法。