时间戳

首页 > 解决方案 > rails - jQuery 在加载时未定义，之后按预期工作

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

问题描述

我是 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.erbfor jQueryand中添加 javascript_include_tagbootstrap吗？还是只有宝石就足够了？这可能是原因吗？

我希望模板能像他独立工作一样工作。有人可以阐明一下吗？

太感谢了！

编辑：引发错误的行是

 // 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 没有加载

标签： jqueryruby-on-railsruby-on-rails-5

解决方案

您应该将执行该函数的代码包装在对 jqueryready事件https://api.jquery.com/ready/的回调中。

另请注意，您也在使用 turbolinks，它有自己的页面加载 ( document.addEventListener('turbolinks:load', function(e){....})) 事件，由 turbolinks 触发。

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

就像是：

document.addEventListener('turbolinks:load', function(e) {
  //code that should be run on each page load

  $(document).on('ready', function() { // you can use the shortcut $(function() {
    //code that should be run on each page load after jquery was initialized
  }
})

推荐阅读