JavaScript 与 Rails 部分

Question

我正在开发一个网站，但遇到了一个非常奇怪的错误，我似乎无法弄清楚。我有一个表格，表格的每一行都有一个带有按钮的列。单击按钮时，应该会弹出一个工具提示。该表是从部分呈现的。现在我遇到的问题是，表格中的图标不会弹出工具提示，除非网页上有一个不在表格中的额外图标。所以这是我渲染部分的代码(这不会在 table 上显示工具提示):

<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

委托(delegate)

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

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

我知道您已经完成了此设置 - 我将对其进行改进以使用上面的代码。不同之处在于，如果您使用上面的代码，它本质上允许您通过文档/正文将“click”事件绑定(bind)到特定元素

您必须记住，Javascript 与 DOM 一起工作。 - 这意味着它无法告诉如何页面是如何呈现的，只能知道它具有某些元素。此外，这些元素需要在 load 时出现 - 如果此时没有这些元素，JS 将无法绑定(bind)到它们

希望这能为您提供更多概述 - 很抱歉我无法提供更多帮助!