Javascript jQuery没有使用Ruby on Rails加载

我在加载一个Javascript文件时遇到了麻烦，该文件在RubyonRails中包含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>

jquery源于gem文件中的gem“jqueryrails”

单击后未加载动画。我使用的是Rails 5，我想问题出在TurboLink上

要解决这个问题，我需要做些什么？

像这样做，删除rails ujs，最后需要turbolink，并在turbolink之前逐个需要所有文件。不要使用require

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

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

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

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

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

是的，控制台。正确调用了日志“abc”。-L.S.Koy

@L.S.Koy你错了。如果您有turbolinks working console，将无法正确调用.log。$document.readymain函数仅在整页刷新时调用main函数，因为turbolinks会缓存页面，因此当您单击链接时，它不会进行整页刷新，因此$document.ready不会运行。这意味着，如果单击某个链接，$document.ready不会运行，也不会执行包含要运行的js代码的函数{main；}

要使js代码在需要使用的所有TurboLink事件上正确执行

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

---

Turbolinks尝试跟踪每个链接，即使它是一个链接，在这种情况下，它只是重新加载页面。你有一些方法来解决这个问题

备选案文1： 将链接更改为没有任何href:

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

选项3：告诉turbolinks不要跟随链接：

如果它不起作用，请在代码中添加几个console.log，找出它没有到达的部分。CSS可能存在一些问题，这些问题不是共享的，因此我们无法帮助解决，但它可能需要相对或绝对位置来移动导航

---

希望这能帮您找到正确的方向，如果它不起作用请告诉我，调试后您发现了什么，我会更新我的答案。

如果您认为问题出在TurboLink上，请尝试执行$'.menu\u bar'。在“单击”上，使用函数{…，而不是$'.menu\u bar'。单击函数{….你在控制台中有错误吗？谢谢你的回答。它不能解决问题，我在控制台中也没有错误。如果你在控制台中没有收到任何错误，jQuery正在加载，否则你会看到ready未定义。错误可能是代码中的其他内容，可能是CSS中的-代码本身似乎可以工作：也许可以尝试在main中添加$'nav'.css'position'、'relative'；您也可以尝试共享更多信息，例如HTML、JS和CSSI。我们尝试添加$'nav'.css'position'、'relative'；但不起作用。HTML.erb在描述中进行了编辑。css工作正常：。在主函数中添加console.log'abc'，并查看是否正确调用，如果需要当时不工作，请尝试$document.readymain；$document.on'turbolinks:load'，main；，到您的javascript文件。我已经按照您所说的那样尝试了，但没有效果。当我添加控制台时。在$'之后记录'abc'。菜单\栏。单击函数{…点击后，abc肯定会显示在控制台中。我尝试过的另一件事是：如果我删除/=require turbolinks并将js load函数重新更改为$document.readymain；它会突然正常工作。但是为什么它不能与turbolinks一起工作？@L.S.Koy您没有触发页面更改。这就是为什么您的点击有效。因为turbolinks breaks如果您更改页面而不刷新页面，请链接。我是对的。您相信我吗？我当然相信您，但我不明白为什么turbolinks仍然无法使用。我也尝试了完美！非常感谢。

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

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

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

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