Rails中Turbolinks的page:fetch事件无法触发求助

我来帮你一步步排查这个问题！你遇到的page:receive/turbolinks:receive等事件无响应的情况，通常和Turbolinks版本、初始化方式或者事件绑定时机有关，下面是具体的排查和解决步骤：

1. 先确认你用的是Turbolinks还是Turbo #

首先要搞清楚项目里的前端导航工具：

• 如果你的Rails版本是7.x及以上，默认使用的是Turbo（Hotwire的一部分），它是Turbolinks的升级替代版本，原有的Turbolinks事件（比如turbolinks:fetch）已经不再生效，需要用Turbo专属的事件。
• 如果是Rails 6及以下，大概率是Turbolinks 5+，这时候应该用turbolinks:前缀的事件。

你可以通过以下方式确认：

• 查看Gemfile：如果是gem 'turbolinks'就是Turbolinks；如果是gem 'turbo-rails'就是Turbo。
• 查看前端入口文件：app/javascript/application.js里如果有import "@hotwired/turbo-rails"就是Turbo；如果是import Turbolinks from "turbolinks"; Turbolinks.start();就是Turbolinks。

2. 用对应版本的事件名测试 #

根据你的工具版本，替换测试代码：

如果是Turbolinks 5+ #

用turbolinks:前缀的事件，并且要确保在Turbolinks加载完成后绑定事件：

// 等待Turbolinks初始化完成后再绑定事件
$(document).on('turbolinks:load', function() {
  $(document).on('turbolinks:fetch', function() { alert("Fetch started!"); });
  $(document).on('turbolinks:receive', function() { alert("Response received!"); });
});

如果是Turbo（Rails 7+） #

Turbo的事件命名和Turbolinks不同，对应的替代事件是：

// 等待Turbo初始化完成
document.addEventListener('turbo:load', function() {
  // 对应turbolinks:fetch的事件
  document.addEventListener('turbo:before-fetch-request', () => alert("Fetching..."));
  // 对应turbolinks:receive的事件
  document.addEventListener('turbo:response-received', () => alert("Response received!"));
});

3. 确保Turbolinks/Turbo正确初始化 #

• Turbolinks：检查app/assets/javascripts/application.js（Sprockets）里是否有//= require turbolinks，并且放在jQuery之后（如果用jQuery的话）；如果是Import Maps，要确保import Turbolinks from "turbolinks"后调用了Turbolinks.start()。
• Turbo：确保app/javascript/application.js里有import "@hotwired/turbo-rails"，并且没有被注释掉。

4. 验证跳转是由Turbolinks/Turbo处理的 #

只有当页面跳转是通过Turbolinks/Turbo触发时，这些事件才会生效：

• 点击页面内的链接时，观察浏览器地址栏是否有默认的进度条（Turbolinks是蓝色条，Turbo是灰色条），或者打开浏览器控制台的Network标签，看请求类型是否是XHR（而不是普通的页面刷新）。
• 如果是用JS手动触发跳转，要使用Turbolinks.visit('/your-path')（Turbolinks）或Turbo.visit('/your-path')（Turbo），而不是window.location.href，后者会绕过导航工具，不会触发事件。

5. 排查代码冲突 #

• 暂时禁用其他第三方JavaScript库（比如jQuery插件、自定义的JS代码），测试事件是否能正常触发，排除冲突问题。
• 检查是否有其他事件处理函数调用了event.stopPropagation()或event.preventDefault()，阻止了Turbolinks/Turbo事件的传播。

按照这些步骤排查，应该能解决事件无响应的问题！

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