页面外单击Rails后，Javascript停止

Rails noob和更可悲的Javascriptüber noob。我的static.js文件中有以下代码，在单击我的购物车显示页面并返回主页之前，这些代码正常工作

$(function() {
  $('a').click(function() {
    $('html, body').animate({
      scrollTop: $(this.hash).position().top
    }, 1200);
    return false;
  });
});

---

当我在浏览完购物车视图后返回主页时，导航不再平滑地滚动到锚点，而是跳转到锚点，就好像那里没有js一样。我的问题是如何永久保持这个平滑的卷轴。谢谢。

涡轮链接

问题几乎肯定会出在第三方JS上，它基本上只会拉取通过单击turbolinks启用的链接访问的页面的

标签

Turbolinks的问题在于，由于它保留了页面的

部分，因此实际上会阻止JS绑定到附加到DOM的新元素，从而导致您面临的问题

解决这一问题的方法是要么使用回调函数，要么使用回调函数。我倾向于在可能的情况下使用这两种方法：

--

授权

委托是指将javascript事件绑定到DOM的“稳定”元素，将事件调用委托给所需的元素

当DOM中的元素不断变化（如TurboLink）并且需要“动态”绑定元素时，可以使用此选项。这通常通过Ajax请求完成，因为DOM将根据来自服务器的新数据而变化：

#app/assets/javascripts/application.js
$(document).on("click", ".your_element", function(){
   // will delegate from "document" (which is always present), to .your_element
});

--

涡轮链接事件

由于

$（document）.ready

在Turbolinks下不起作用（它用自己的函数覆盖此功能），因此您必须使用

Turbolinks

事件之一（通常

页面：load

）：

---

修复

试试这个：

#app/assets/javascripts/application.js
$(document).on("click", "a", function() {
  $('html, body').animate({
    scrollTop: $(this.hash).position().top
  }, 1200);
  return false;
});

---

您是否尝试过在函数中添加

console.log

，以查看它是否被调用？您还可以添加

debugger

作为断点，并在浏览器中单步执行代码。非常好，这很有效，我也非常感谢您提供的额外信息。谢谢你，里奇。

#app/assets/javascripts/application.js
$(document).on("click", "a", function() {
  $('html, body').animate({
    scrollTop: $(this.hash).position().top
  }, 1200);
  return false;
});