页面JS仅在Ctrl+R刷新后生效，点击按钮仅跳转顶部问题排查

这大概率是Rails的**Turbo（或旧版Turbolinks）**在搞鬼，具体逻辑如下：

• Turbo默认用AJAX方式加载页面内容，不会重新执行整个页面的JS文件。如果你是从其他页面导航到当前页面，按钮的事件绑定代码只在页面首次加载时执行过一次，Turbo加载新页面时不会重新绑定事件，导致点击按钮时JS根本没触发，只能触发空链接的默认行为——跳转到页面顶部（因为空链接""等价于当前页面锚点#）。
• 当你按Ctrl+R硬刷新时，浏览器会完全重新加载页面所有资源（包括JS文件），此时事件绑定代码会重新执行，按钮的点击事件被正确绑定，JS自然就能正常工作了。

• 改成事件委托绑定，把事件绑定到父元素（比如document或表格的父容器），监听按钮点击：

  document.addEventListener('click', function(event) {
    if (event.target.id === 'IncreaseInvoicePositions') {
      event.preventDefault();
      // 这里写添加表格行的逻辑
    }
  });
  

• 或者利用Turbo的事件钩子，在Turbo加载完成后重新绑定事件：

  document.addEventListener('turbo:load', function() {
    const btn = document.getElementById('IncreaseInvoicePositions');
    if (btn) {
      btn.addEventListener('click', function(event) {
        event.preventDefault();
        // 添加表格行逻辑
      });
    }
  });
  

• 另外，如果按钮是<a>标签，空链接href=""本身就带跳转属性，哪怕加了preventDefault，只要事件没绑定上就会跳。可以把按钮改成<button>标签，从根源避免默认跳转行为。

内容的提问来源于stack exchange，提问作者Julian