jQuery 适用于 Heroku，但不适用于 Rails localhost

Posted 2023-05-09

【中文标题】jQuery 适用于 Heroku，但不适用于 Rails localhost

【英文标题】：jQuery works on Heroku, but not on Rails localhost

【发布时间】：2016-10-10 21:27:43

【问题描述】：

我编写了一些 jQuery 来定位左侧导航栏中的列表项 (li)。当我将更改推送到 Heroku 时，jQuery 工作，但我编写的 jQuery 在本地主机上不起作用。我的目标是当用户将鼠标悬停在导航栏中的链接上时，链接向右移动 2 em。我不明白为什么 jQuery 在托管站点而不是 localhost 上工作。我有一种感觉，它可能与 application.js 文件有关。任何帮助将不胜感激，并提前感谢！！！

// javascript assets
// = require jquery
// = require jquery_ujs
// = require turbolinks
// = require welcome.js
// = require_tree .

// the html
<div class="list-items">
      <ul>
        <li class="links"><%= link_to "Portfolio", portfolio_url %></li>
        <li class="links"><%= link_to "Tutorials", tutorials_url %></li>
        <li class="links"><%= link_to "Blog", blog_url %></li>
        <li class="links"><%= link_to "About Me", aboutme_url %></li>
      </ul>
</div>

// css for list items
.list-items 
    font-size: 1.5em;
    line-height: 2em;
    margin-left: -.20em;



// JS for hovering over the link
$(document).ready(function() 
  console.log("You are in the console right now!!");

  $(".links").on("mouseenter", function() 
    $(this).css("margin-left", "2em");
  );

  $(".links").on("mouseleave", function() 
    $(this).css("margin-left", "-0.05em");
  );
);

【问题讨论】：

当您尝试在 localhost 上运行时，您遇到的错误是什么？

@Nirupa 我在本地主机上运行它时没有收到任何错误。除了 JavaScript，一切正常。

【参考方案1】：

这里想到了一件事......

TurboLinks 不适用于

$(document).ready(function()

因为当您导航时，Turbolinks 不会重新加载页面。可能只是因为 Turbolinks 加载页面的方式，在您的本地计算机上您没有看到它工作。在生产环境中，您的导航方式可能有所不同，并且页面实际上触发了此事件。

请参阅Rails 4: how to use $(document).ready() with turbo-links 了解更多详情。

【讨论】：

我之前在 Rails 中使用过 $(document).ready() 并且从来没有遇到过任何问题。自从我使用 jQuery 以来已经有一段时间了，所以我有点忘记了如何让它与 Rails 一起玩。