jQuery 未加载 Ruby on Rails

debugcn 发表于 Dev

ysief-001

我在 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 发布的。

我必须改变什么才能解决这个问题？

亚历克斯·桑托斯

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

选项 1：将您的链接更改为没有任何 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： “告诉”turbolinks 不要关注#链接：

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。