Rails中link_to的delete方法与data-confirm失效问题排查

问题重现 #

使用Rails的link_to生成带method: :delete和data-confirm的删除链接时，点击链接始终触发show动作而非destroy动作：

原Rails代码 #

<%= link_to "<i class='fa fa-trash'></i>".html_safe, resource_path(id: id), method: :delete, data: { confirm: "Are you sure...?" }, class: "text-center dropdown-item text-danger bg-light-danger", title: "Delete"%>

生成的HTML #

<a data-confirm="Are you sure...?" class="text-center dropdown-item text-danger bg-light-danger" title="Delete" rel="nofollow" data-method="delete" href="/resource/1"><i class="fa fa-trash"></i></a>

已排除Rails版本差异，尝试更换jQuery CDN、通过yarn安装jQuery均无效。

排查与解决步骤 #

1. 确认Rails UJS是否正确加载 #

Rails的data-method依赖Rails UJS（Unobtrusive JavaScript）处理非GET请求，若UJS未加载或加载顺序错误，会导致delete请求降级为GET（即触发show动作）：

• Rails 6+/7：检查app/javascript/application.js是否引入@rails/ujs，且加载顺序在jQuery之后：

  // app/javascript/application.js
  import jQuery from 'jquery'
  window.jQuery = jQuery
  import Rails from '@rails/ujs'
  Rails.start()
  

• 旧版本Rails：检查页面源码是否包含<script src="/assets/rails-ujs.js"></script>，确认文件已正确引入。

2. 排查JavaScript冲突 #

第三方JS库（如Bootstrap、自定义脚本）可能覆盖或阻止UJS的事件绑定：

• 临时禁用非必要JS文件，逐一排查冲突来源；
• 打开浏览器控制台，检查是否有JS报错（如jQuery未定义、变量冲突），优先修复报错；
• 检查是否有自定义click事件监听阻止了UJS执行，比如：

  // 这类代码会中断UJS的事件传递
  $('.dropdown-item').click(function(e) {
    e.stopPropagation()
  })
  

3. 确认路由配置正确性 #

检查config/routes.rb中是否正确定义了destroy路由：

# 确保包含完整资源路由
resources :resources
# 或单独定义destroy路由
delete '/resources/:id', to: 'resources#destroy', as: :resource

运行rails routes命令，确认resource_path对应的DELETE路由存在，且指向resources#destroy动作。

4. 极简链接测试 #

创建一个无额外属性的测试链接，排除样式、图标等干扰：

<%= link_to "测试删除", resource_path(id: id), method: :delete, data: { confirm: "确认删除？" } %>

若该链接正常触发destroy动作，再逐步添加原链接的class、图标等属性，定位是否是某个属性导致的问题。

5. 手动模拟UJS逻辑（临时修复） #

若以上方法无效，可手动绑定事件模拟UJS核心逻辑：

$(document).on('click', '[data-method="delete"]', function(e) {
  e.preventDefault()
  const link = $(this)
  if (confirm(link.data('confirm'))) {
    const form = $('<form>', {
      method: 'POST',
      action: link.attr('href')
    }).append($('<input>', {
      type: 'hidden',
      name: '_method',
      value: 'delete'
    })).append($('<input>', {
      type: 'hidden',
      name: 'authenticity_token',
      value: $('meta[name="csrf-token"]').attr('content')
    }))
    form.appendTo('body').submit()
  }
})

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