jQuery未随Ruby on Rails一起加载

Question

我在Ruby on Rails中加载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

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

选项1：将链接更改为没有任何href：

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

选项2：阻止事件传播，以使事件不会到达Turbolink：

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

选项3： “告诉” turbolink不遵循#链接：

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

如果它不起作用，请在代码中添加一些console.log ，以找出它不涉及的部分。 CSS可能存在一些问题（由于未共享，所以我们在那里无能为力），但可能需要相对或绝对位置来移动nav 。

希望这能为您设定正确的方向，让我知道它是否不起作用以及调试后您发现了什么，我将更新答案。

Answer 2

要做到这一点，删除rails-ujs ，最后require turbolink ，然后才需要一个一个地链接所有文件。 不要使用require .

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

然后在此代码中包含js load函数

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

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

另一个问题是，您是否在此函数内设置了断点并确保未调用该断点？

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

是的，正确调用了console.log（'abc'）。 – LSKoy

@LSKoy你错了。 如果您具有Turbolinks，则无法正确调用console.log 。 $(document).ready(main)函数将仅在刷新整个页面时调用main()函数，因为涡轮链接会缓存页面，因此当您单击链接时，它不会进行整个页面刷新，因此您的$(document).ready无法运行。 这意味着，如果您单击link ，则$(document).ready不会运行并且不会执行function() { main(); } function() { main(); } ，其中包含您要运行的js代码

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

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