Почему метод наведения мыши не работает с текстом узла в диалоге?

0

Я использую d3.js для рисования reingold-tilford Tree. Я добавляю функцию привязки к узлу следующим образом:

.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 в модальный диалог, функция mouseover не влияет на текст узла, я могу видеть только всплывающую подсказку при зависании на круге.

Пожалуйста, дайте мне руку!

  • 0
    похоже, вы имеете дело с динамическими элементами .... вместо этого используйте делегирование событий
  • 0
    Можете ли вы поделиться частью селектора также
Показать ещё 5 комментариев
Теги:
modal-dialog
d3.js
mouseover

2 ответа

0
Лучший ответ

Я решил свою проблему. Оказывается, у моего исходного текста есть CSS:

pointer-events: none;

Я удалил его, и это сработало!

Поделиться
0

Элемент, к которому вы хотите добавить событие, не существует в момент привязки события. Чтобы решить эту проблему, вы должны добавить событие в документ, чтобы получить событие через распространение.

Чтобы решить ваш вопрос, вы должны изменить это:

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

К этому:

$(document).on("mouseover", "mySelector", function(e) { ... });
Поделиться
  • 0
    Браузер показывает это: <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> Я попробовал ваш способ, но он не сработал, что не так в моей ситуации?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню