无法使用放在Ruby on Rails供应商文件夹中的jQuery插件

Question

我正在尝试使用jQuery库Knob为交互式优化系统创建一个功能正常的拨号/仪表系统。 我已将库添加到我的vendor文件夹中，并在application.js中包含了vendor javascripts文件夹。

应用程序/资产/ JavaScript的/ application.js中

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.

在我看来，我添加了一些测试代码以确保jQuery正常工作并且它可以工作（我知道，我知道，关注点分离 - 一旦我完成测试，我就会将JS移到资源文件夹中）。

应用程序/视图/ static_pages / simutronx.html.erb

<% provide(:title, "The SimutronX") %>
  <h1>The SimutronX</h1>
  <p>Some test text</p>
  <input type="text" class="dial" data-min="-50" data-max="50">
  <%= javascript_tag do %>
    $(document).ready(function(){
      $("p").hide();  
      $(".dial").knob();
    });
  <% end %>

它从文档中看起来好像库应该将.dial类设置为表盘而不是它。 相反，输入字段仍然是标准输入字段。 此外，大约50％的时间测试文本无法隐藏在页面加载上。

怎么可能出错？

更新

我已经检查过，似乎jQuery和插件至少有时会通过资产管道加载。

但是，不仅插件JavaScript无法工作（我可以接受这似乎是一个库问题 - 虽然不太可能因为库的流行），但有一半时间jQuery仍然无法工作，即使它出现要正确加载，并且代码具有文档就绪功能，这本来是我对问题原因的第一个想法......

我现在还将这些jQuery和jQuery Knob插件添加到assets.rb中 。

Rails.application.config.assets.precompile += %w( jquery-3.2.0.min.js )
Rails.application.config.assets.precompile += %w( jquery.knob.min.js )

我在布局视图中添加了一个jQuery include标记。

<%= javascript_include_tag "jquery-3.2.0.min", "application" %>

我在视图中添加了jQuery Knob插件， simuntronx.html.erb 。

<%= javascript_include_tag "jquery.knob.min" %>

我在simuntronx.html.erb视图中测试了内联JavaScript。

<p onclick="this.style.backgroundColor='#990000'">Some more test text</p>

内联JavaScript似乎每次都有效。

Answer 1

我解决了类似的问题，我无法使用jquery-ui的效果。 我通过创建具有特定布局的测试控制器找到了解决方案。

阅读更多内容了解如何在未投放的生产中创建特定布局轨道资产（还有另一个资产问题）

在这个布局中，我将使用cdn版本的jquery和jquery-ui，因为它可以使用CDN而不是jquery-ui gem，我明白第一个问题是gem。

下载jquery-ui（其中还包括jquery文件）并在我的vendor / assets / javascripts和样式表中包含jquery和jquery-ui解决了这个问题

其他javascript文件不会导致任何其他问题，但使用此测试控制器来测试样式表，我发现一个特定的自定义CSS样式表打破了jquery-ui效果。

我可以通过删除样式表来解决这个问题，但是包含了很多很好的效果（因为我正在使用布局）。

在这一点上，我刚开始使用chrome开发人员工具来取消注释链接所具有的所有css属性，以便通过测试属性创建问题的效果来发现

例如，确实产生冲突的css属性是使用a tag

a {
    color: #28c3ab;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

Answer 2

我找到了问题的根源，这是knob.js和kontrol.js库本身的一个问题。 由于当前分发文件中的错误导致库无法解析，这反过来导致jQuery无法间歇性地工作，因为浏览器试图包含插件并且失败似乎干扰了jQuery代码的解释本身。 一旦我删除了这些，jQuery工作得很好。

我现在添加了一个不同的js库，它没有问题。