为什么鼠标悬停方法不适用于对话框中节点的文本？答案

【问题标题】：Why does the mouseover method don't work on node's text in a dialog?为什么鼠标悬停方法不适用于对话框中节点的文本？
【发布时间】：2014-01-02 06:49:38
【问题描述】：

我正在使用 d3.js 来绘制 reingold-tilford 树。我向节点添加了一个 mouseover 函数，如下所示：

.on("mouseover", function(d) {
  return tooltip.style("visibility", "visible").text(function() {
    d.name;
  })
    .on("mousemove", function() {
      return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

它在一个 html 中工作正常，但是，当我将此 html 加载到模态对话框中时，鼠标悬停功能不会在节点的文本上生效，我只能在将鼠标悬停在圆圈上时看到工具提示。

请帮帮我！

【问题讨论】：

看起来你正在处理动态元素....改用事件委托
你也可以分享选择器部分
jQuery 没有style() 方法，你应该使用css()
@ArunPJohny P Johny 因为我是 jquery 新手，该怎么做？
@adeneo 但它在一页中运行良好，我认为问题在于我使用的模式对话框。

标签： jquery d3.js modal-dialog mouseover

【解决方案1】：

您尝试添加事件的元素在您绑定事件时不存在。要解决此问题，您必须将事件添加到文档中以通过传播获取事件。

要解决你的问题，你应该改变这个：

$("mySelector").on("mouseover", function(e) { ... });

到这里：

$(document).on("mouseover", "mySelector", function(e) { ... });

【讨论】：

浏览器显示：<g class="node" transform="rotate(-36)translate(300)"> <circle r="6.5" style="stroke: steelblue; fill: steelblue;"> <text dy=".31em" text-anchor="start" transform="translate(8)">61.0.0.0/8</text> </g>我已经尝试过你的方法，但没有成功，我的情况有什么问题？

【解决方案2】：

我已经解决了我的问题。原来我的原文有这样的css：

pointer-events: none;

我删除了它，它起作用了！

【讨论】：