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

【问题标题】：Binding events to dynamically generated content using data method of d3 js library使用d3 js库的数据方法将事件绑定到动态生成的内容
【发布时间】：2012-05-22 17:58:36
【问题描述】：

我正在尝试将点击事件绑定到使用 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)，但如果我返回该元素，它就不起作用。有什么帮助吗？

（实际代码要复杂得多，我只是复制了重要的部分）。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

这样做的更 d3 方式是

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

【讨论】：

我的“li”中不仅有一个 div。这只是一个例子。我的结构要复杂得多。这不是一个好的选择。
您可以尝试在使用 d3 创建的外部元素上使用 .on 函数。您的描述既没有确切说明问题是什么，也没有显示确切的代码 - 这使得您很难弄清楚您真正想要实现什么以及如何做到这一点。
我想将点击事件绑定到返回的 innerHTML 中包含的元素。
您可以在创建它们后选择它们，然后使用 d3 的 .on 方法，或者按照我上面的建议更改内部 HTML 的创建。
正如我所说，修改内部 HTML 创建不是一种选择（它很复杂，并且使用 jsonp 服务创建）。我解决了迭代新创建的 HTML 的问题，但我认为这不是一个很好的解决方案。这应该是一个更好的方法。

【解决方案2】：

这就是答案。

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

【讨论】：