rails - jQuery在加载时未定义，并在按预期工作

Question

我是Rails的新手（在ruby 2.5.3-p105上使用Rails 5.1.7），在我的目标网页上放置模板时遇到了一些问题。我正在使用bootstrap 4和jQuery 3。

（模板是这一个https://startbootstrap.com/themes/agency/）

似乎在以某种方式加载所有其他脚本后加载jQuery。

我试图在jquery之前加载bootstrap但没有用。尝试改变turbo_links上的订单。

assets/javascripts/application.js如下

//base
//= require jquery3
//= require jquery_ujs
//= require rails-ujs
//= require turbolinks
//
//template
//= require popper
//= require bootstrap
//
//vendors
//= require jquery-easing/jquery.easing
//
//assets
//= require template/agency
//= require template/contact_me
//= require template/jqBootstrapValidation

我是否需要在application.html.erb中为jQuery和bootstrap添加javascript_include_tag？或者只是宝石就足够了？这可能是原因吗？

我希望模板的工作方式与他独立一样。有人可以解释一下吗？

非常感谢！

编辑：抛出错误的行是

 // Collapse Navbar
  var navbarCollapse = function() {
    if ($("#mainNav").offset().top > 100) {
      $("#mainNav").addClass("navbar-shrink");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
    }
  };
  // Collapse now if page is not at top
  navbarCollapse();
  // Collapse the navbar when page is scrolled
  $(window).scroll(navbarCollapse);

但它应该无关紧要，因为重点是jQuery没有加载

Answer 1

你应该将回调中执行该函数的代码包装到jquery qazxsw poi event qazxsw poi中。

另请注意，您也使用了turbolinks，它有自己的页面加载事件（ready），由turbolinks触发。

您可能需要嵌套两个回调以确保一切准备就绪。

就像是：

https://api.jquery.com/ready/

Answer 2

我之前用jquery gem遇到过同样的问题。现在对于我的所有webapps，我将使用jquery cdn而不是gem并将其放在标签之后。

以下是我的webapps示例中的代码。

document.addEventListener('turbolinks:load', function(e){....})

希望这有帮助。