Rails 6中link_to无法弹出删除确认模态框直接执行删除的解决方法

步骤1：确认核心依赖加载 #

首先要保证项目里的Rails UJS和SweetAlert2都正确配置：

• 检查app/javascript/packs/application.js，确保Rails UJS已启动：

  require("@rails/ujs").start()
  

• 安装SweetAlert2并全局暴露：
  执行命令安装：

  yarn add sweetalert2
  

  在application.js里添加：

  import Swal from 'sweetalert2'
  window.Swal = Swal
  

步骤2：修改删除链接的视图代码 #

把原来的link_to改成下面这样，去掉默认的data:confirm，改用自定义属性和标识类，方便JS绑定：

<%= link_to '<i class="fa fa-remove text-danger"></i>'.html_safe, note_path(note),
            method: :delete,
            class: 'delete-note-link',
            data: {
              confirm_text: '确定要删除这条笔记吗?',
              confirm_btn_text: '是的，删除这条笔记',
              cancel_btn_text: '不，保留这条笔记',
              confirm_btn_color: '#BA3525'
            } %>

步骤3：编写事件拦截的JavaScript #

在app/javascript/src下新建delete_note_confirm.js，写入以下代码：

document.addEventListener('turbolinks:load', function() {
  // 给所有删除笔记的链接绑定点击事件
  document.querySelectorAll('.delete-note-link').forEach(link => {
    link.addEventListener('click', function(e) {
      // 先阻止默认的删除行为
      e.preventDefault();

      // 从链接的data属性里读取配置参数
      const alertConfig = {
        title: this.dataset.confirmText,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: this.dataset.confirmBtnText,
        cancelButtonText: this.dataset.cancelBtnText,
        confirmButtonColor: this.dataset.confirmBtnColor
      };

      // 弹出SweetAlert确认框
      Swal.fire(alertConfig).then(result => {
        if (result.isConfirmed) {
          // 用户确认后，触发Rails UJS的删除操作
          Rails.fire(this, 'click');
        }
      });
    });
  });
});

然后在application.js里引入这个文件：

import '../src/delete_note_confirm'

步骤4：验证功能 #

重启Rails服务和webpack-dev-server（如果在用），点击删除图标就能看到SweetAlert的确认框了，确认后才会执行删除。

为什么之前的方法没用？ #

• 你原来写的data:confirm是Rails UJS的原生确认逻辑，它只会弹出浏览器自带的确认框，根本不会识别那些SweetAlert的专属属性。
• turbo_confirm是Rails 7 Turbo框架的特性，Rails 6用的是Turbolinks+UJS，自然不生效。
• button_to生成的是表单，你没给表单绑定SweetAlert的拦截事件，所以直接提交了，而且默认的button_to样式会覆盖你的图标。

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