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

Question

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

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

Answer 1

这样做的更多 d3 方法是

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