jQuery 未在 Rails 上加载 Ruby

Question

我在 Rails 上的 Ruby 中加载 Javascript 文件（其中包括 jQuery）时遇到问题。

$(document).ready(main);

var contador = 1;

function main(){
  $('.menu_bar').click(function(){

    if(contador == 1){
      $('nav').animate({
        left: '0'
      });
      contador = 0;
     } else {
        contador = 1;
        $('nav').animate({
          left: '-100%'
        });
       }
    });
  };

正确的 html.erb 看起来像这样：

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="fa fa-bars"></span>Brand</a>
  </div>
  <nav>
    <ul>
      <li><%= link_to "Link 1", '#'%></li>
      <li><%= link_to "Link 2", '#'%></li>
      <li><%= link_to "Link 3", '#'%></li>
    </ul>
  </nav>
</header>

正确的application.js包括：

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .

jquery 来源于 Gemfile 中的 gem 'jquery-rails'。

点击后动画没有加载。我正在使用 Rails 5，我猜问题是由 Turbolinks 发出的。

我需要更改什么才能解决这个问题？

Answer 1

这样做，最后删除 rails-ujs、require turbolink 并在 turbolinks 之前将您的所有文件一一要求。不要使用 require .

//= require jquery
//= require jquery_ujs
//= require each one of your files on the order you want to load the !!!
//= require turbolinks

然后用这段代码包含js加载函数

$(document).on('turbolinks:load', function() {
    main();
}

function main(){
    // Include your code
    };

另一个问题是，你有没有在这个函数中设置断点并确保它没有被调用？

$('.menu_bar').click(function(){
       // breakpoint
});

Yes, console.log('abc') is called correctly. – L.S.Koy

@L.S.Koy你错了。如果你有 turbolinks 工作 console.log 将不会被正确调用。 $(document).ready(main) 函数只会在整页刷新时调用 main() 函数，因为 turbolinks 会缓存页面，所以当您单击 link 它不会执行整页刷新，所以你的 $(document).ready 不会运行。这意味着如果你点击一个link，你的$(document).ready不会运行并且不会执行function() { main(); }其中包含你想要运行[=的js代码26=]

要在所有 turbolinks events 上正确执行您的 js 代码，您需要使用

$(document).on('turbolinks:load', function() {
    main();
}

Answer 2

Turbolinks 尝试跟随每个 link（即使它是 #，在这种情况下它只是重新加载页面）。您有几种解决方法。

选项 1： 将您的 link 更改为没有任何 href:

<div class="menu_bar">
  <a class="bt-menu"><span class="fa fa-bars"></span>Brand</a>
</div>

选项 2： 阻止事件传播，使其不会到达 turbolinks:

$('.menu_bar a').click(function(e) {
  e.preventDefault();
  console.log("I HAVE BEEN CLICKED");
  // Rest of code here...
  return false;
});

选项3: "Tell" turbolinks 不遵循# links:

$(document).on('turbolinks:click', function (event) {
  if (event.target.getAttribute('href').charAt(0) === '#') {
    return event.preventDefault();
  }
});

如果它不起作用，请在代码中添加一些 console.log 以找出它没有到达的部分。 CSS 可能存在一些问题（未共享，因此我们无能为力），但可能需要相对或绝对位置才能移动 nav.

希望这能让您朝着正确的方向前进，如果它不起作用请告诉我，以及您在调试后发现了什么，我会更新我的答案。

jQuery 未在 Rails 上加载 Ruby

jQuery is not loading with Ruby on Rails

javascript

jquery

ruby-on-rails

turbolinks