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，并在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
});

是的，console.log('abc') 被正确调用。 – L.S.Koy

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

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

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