Rails 6.1下@rails/ujs无法拦截ajax:complete事件问题求解

• 首先确认你已经在application.js中正确初始化了@rails/ujs，即使ajax:send已经触发，也建议检查初始化代码是否放在所有事件监听代码之前：

// application.js 开头必须包含以下初始化代码，且优先级高于你的自定义事件监听代码
import Rails from "@rails/ujs"
Rails.start()

• 将ajax:send和ajax:complete的事件监听逻辑从turbolinks:load回调中移出。这两个事件绑定在全局document对象上，不需要随Turbolinks页面加载重复绑定，重复绑定可能导致事件回调冲突，甚至后续事件无法正常触发，调整后代码如下：

// 直接全局绑定即可，无需包裹在turbolinks:load回调中
document.addEventListener("ajax:send", () => {
  console.log('SEND')
})
document.addEventListener("ajax:complete", () => {
  console.log('COMPLETE')
})

• 检查你绑定了data-remote="true"的链接/表单，有没有在其他ajax:before、ajax:beforeSend回调中调用了event.preventDefault()，如果手动阻止了UJS默认的请求流程，后续的ajax:complete事件将不会触发。
• 确认请求由UJS触发：只有使用带data-remote="true"属性的链接、表单触发，或者调用Rails.ajax()方法发起的请求，才会触发UJS的ajax:系列事件，手动发起的fetch、原生XMLHttpRequest请求不会触发对应事件。
• 确认项目依赖：如果你的项目已经使用Hotwire Turbo替代了Turbolinks，turbolinks:load事件本身不会触发，且Turbo默认会接管远程请求，会和@rails/ujs的事件体系产生冲突，这种情况需要关闭Turbo对指定元素的接管，或者改用Turbo的对应事件体系。

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