Question

我正在网站上工作，我有一个非常奇怪的错误，我似乎无法弄明白。我有一张桌子，每排桌子上都有一个带按钮的栏。单击按钮时，应弹出工具提示。它从局部渲染的这个表。现在我遇到的问题是工具提示没有弹出表格中的图标，除非网页上有一个不在表格中的额外图标。所以这里是我渲染部分的代码（这不会显示表格上的工具提示）：

<div id="mainPage">
  ...
  <section class="fluid">
    <%= render "all_page_graphs" %>
  </section>
  ...
</div>

以下是部分代码：

<i class="filter-icon os blue" data-filter-name="GFilter">
  <div class="tooltip-container">
    <div class="tooltip-tail top"></div>
    <div class="tooltip top clearfix center">
     None
    </div>
  </div>
</i>

如果我像这样渲染我的桌子：

<div id="mainPage">
  ...
  <section class="fluid">
    <%= render "all_page_graphs" %>
  </section>
  ...
</div>
<i class="filter-icon os blue" data-filter-name="GFilter">

单击表格中的按钮时，工具提示会显示。

我想我已经将问题隔离在javascript中了。当我在图表中得到工具提示时，我点击了这行代码：

function FilterTooltips(){
  "use strict";

  if ($(".filter-icon").length == 0)
    return;

  var openFilter = false;
  var $lastFilterOpen = null;

  //hit this function when the tool tip works,
  //but I don't hit it when the tool tip won't
  //load.
  $('body').click(function(e) {
    //do stuff
  }];

我认为问题与$('body')有关，并且工具提示正在加载的事实应该显示在从部分呈现的表中。任何帮助将不胜感激。

Answer 1

<强>团

虽然我没有直接回答您的问题，但我认为问题可能与Javascript delegation有关：

$(document).on("click", ".tooltip-tail top", function(){
    ...
});

我知道你已经设置了这个 - 我会改进它以使用上面的代码。不同的是，如果你使用上面的代码，它实质上允许你绑定＆＃34;点击＆＃34;事件到特定元素到文档/正文

你必须记住，Javascript适用于DOM - 这意味着它无法告诉页面是如何呈现的，只是它具有某些元素。此外，这些元素需要出现在load - 如果您此时没有元素存在，JS将无法绑定到它们

希望这能为您提供更多概述 - 对不起，我无法继续帮助！

带有rails部分的JavaScript

1 个答案: