我正在重新编写一个名为FILTERtrak的应用程序，到目前为止，它一直很好。我在它上面添加了一个订阅模型，用各种方式增强了它，并且真的开始非常喜欢Ruby和Rails。它最初是用Ruby 2.2.2和Rails 4.2编写的。我已经升级到Ruby 2.7.2和Rails 6.1.5（最近）。我在Bootstrap v3.4.1和jQuery 1.12.4上运行的两个版本的APP
在我遇到的所有问题中，我解决的问题都要复杂得多，这看起来太傻了，我似乎不明白为什么会发生这样的事情。
旧版本的FILTERtrak仍然在Heroku上运行。我还没有切换到我的新版本，因为我还在升级它。
这个过滤条件指南按钮，当你悬停在它的旧版本的应用程序显示弹出刚刚好。由于某种原因，这个应用程序的新版本上的非常代码弹出的只是标题，但不是身体？这让我很困惑？？！？.
这告诉我Rails在工作，JavaScript在工作，jQuery在工作，bootstrap在工作，否则弹出标题不会出现。那么，为什么它的工作标题，而不是身体时，代码没有改变？！？
我已经尝试了我能想到的一切，今天搜索了大约1000次。看起来很傻，我似乎不能解决这个小问题，但我需要得到这个弄清楚，因为我需要在其他地方的应用程序中使用更多的弹出框。
我试着在应用程序的另一个区域写另一个弹出框，它工作得很好？所以我不知道这是不是因为Ruby on Rails的新版本阻止了主体部分的出现，或者是什么原因。
我对前端的东西还不是很好。我只是开始习惯HAML了。处理切换的HAML行对我来说似乎非常复杂（以.btn.btn-xs开头）。我试着使用一些在线转换器将HAML中的一行转换为HTML，这样我就可以更好地看到发生了什么，但是没有一个转换器能够成功地将其转换。真不走运我自己用HTML重写了这一行，它做了同样的事情，所以我不确定它是否与以.btn.btn-xs开头的HAML行有关。由于它仍然是工作与哈姆勒线的方式，它是书面的，我认为这不是问题，但我已经很长时间用完的东西尝试。
这是HAML视图，上面有按钮。（我只是包括视图和其他代码的相关部分，如果有人需要看到更多帮助让我知道）。

.text-center
  .btn.btn-xs.btn-block.btn-primary{data: { popover: { content: "#condition-popover" }, placement: "top", toggle: "popover", trigger: "hover click"}, tabindex: "0" } Filter Condition Guide
        #condition-popover.hidden
          .popover-heading
            What do the conditions mean?
          .popover-content
            %dl
              %dt Operational
              %dd
                %ul
                  %li No soot on outlet/bypass
                  %li No cracks
                  %li Wire test passes
              %dt Potentially Compromised
              %dd
                %ul
                  %li 0-20% soot on outlet/bypass
                  %li No cracks
                  %li Dents or impact damage
              %dt Compromised
              %dd
                %ul
                  %li 20%+ soot on outlet/bypass
                  %li Any cracks observed
                  %li Wire test fails

下面是JavaScript/jQuery文件

(function() {
  var ready;

  ready = function() {
    $('[data-toggle=popover]').popover({
      container: 'body',
      html: true,
      content: function() {
        var content;
        content = $(this).attr('data-popover-content');
        return $(content).children('.popover-content').html();
      },
      title: function() {
        var title;
        title = $(this).attr('data-popover-content');
        return $(title).children('.popover-heading').html();
      }
    });
    return $('#service_filter_condition').on('change', function() {
      var selection;
      selection = $(this).val();
      switch (selection) {
        case 'operational':
          $('#customer_notified_container').fadeOut();
          break;
        case 'potentially_compromised':
          $('#customer_notified_container').fadeIn();
          break;
        case 'compromised':
          $('#customer_notified_container').fadeIn();
          break;
        default:
          $('#customer_notified_container').fadeOut();
      }
    });
  };

  $(document).ready(ready);

  $(document).on('turbolinks:load', ready);

}).call(this);

这是一个目前正在发生的事情的图片。你可以看到标题，它甚至有它的标题部分的正确样式。

这是一个图片的非常相同的代码工作在旧版本的应用程序：

对我来说更奇怪的是，如果我检查HTML页面，数据都在那里！它只是不切换身体部分，我只是不知所措，不明白为什么？！？我尝试在容器中添加：“身体”在不同的地方，因为我看到，可以解决身体不来的时候。我能找到的所有其他例子都与我自己的不相似。
如果有人想看别的东西，请告诉我。我感谢任何输入，什么可能导致这种轻微的刺激发生。我花了更少的时间重写一些数据库查询，修复了这个小问题，让我发疯。
谢谢你，斯科特
更新：以下是现在的工作代码：
JS

(function() {
  var ready;

  ready = function() {
    $('[data-toggle=popover]').popover({
      html: true,
      trigger: 'hover click',
      placement: 'top',
      title: 'What do the conditions mean?',
      content: function() {
        return $('#popover-body').html();
        }
    });
    return $('#service_filter_condition').on('change', function() {
      var selection;
      selection = $(this).val();
      switch (selection) {
        case 'operational':
          $('#customer_notified_container').fadeOut();
          break;
        case 'potentially_compromised':
          $('#customer_notified_container').fadeIn();
          break;
        case 'compromised':
          $('#customer_notified_container').fadeIn();
          break;
        default:
          $('#customer_notified_container').fadeOut();
      }
    });
  };

HAML：

.btn.btn-xs.btn-block.btn-primary{"data-toggle": "popover", "tabindex": "0", "html": "true" } Filter Condition Guide
          #popover-body.hidden{"data-toggle": "popover", "html": "true"}
            = render 'filter_conditions_popover'

它现在工作正常。我最终保留了渲染线，因为我喜欢在一个部分，更干净的信息。我还保留了重新编写的JavaScript，因为我认为它更容易阅读。