如何使用jQuery与HTML为按钮添加确认弹窗后再执行任务

你改完代码跑不通，核心是三个低级问题：

• 重复加载了3个不同版本的jQuery、3次Bootstrap脚本，多版本jQuery会直接覆盖之前注册的插件方法，导致confirm()方法完全失效
• 绑定确认框的脚本没等DOM渲染完就执行，此时按钮还没加载出来，绑定直接不生效
• 你用的确认框插件参数名写错了，正文配置项是message不是text，按钮参数名也和你写的不匹配，弹窗根本出不来

1. 清理重复依赖 #

把head标签里重复的jQuery、Bootstrap引入全删了，只留一套兼容版本，引入顺序不能乱：

• 先引入jQuery（建议用3.6.0版本，兼容性最好）
• 再引入Bootstrap的CSS和JS文件
• 最后引入你下载的jquery.confirm.js确认框插件文件
• 其他你用到的vega相关依赖保留即可

清理后的引入结构参考：

<head>
  <title>Anomaly Monitoring Dashboard-International Voice</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="font-awesome.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="roboto-font.css" rel="stylesheet">
  <!-- 单版本jQuery -->
  <script src="jquery.min.js"></script>
  <!-- 单版本Bootstrap -->
  <link rel="stylesheet" href="bootstrap.min.css">
  <script src="bootstrap.min.js"></script>
  <!-- 确认框插件放在jQuery、Bootstrap之后引入 -->
  <script src="jquery.confirm.js"></script>
  <!-- vega相关依赖 -->
  <script src="vega.min.js"></script>
  <script src="vega-lite.min.js"></script>
  <script src="vega-embed.min.js"></script>
</head>

2. 修正事件绑定逻辑 #

把页面最后的脚本全部替换成下面的代码，所有逻辑都放在DOM加载完成的回调里执行，避免时序问题：

$(document).ready(function(){
  // 页面初始加载完成先隐藏加载遮罩
  $('#loading').hide();

  // 给提交按钮绑定确认框
  $("#btnnew").confirm({
    title: "操作确认",
    message: "你确定要执行提交操作吗？",
    confirmButton: "Yes",
    cancelButton: "No",
    confirm: function() {        
      // 点击Yes才执行原有AJAX提交逻辑
      $('#loading').show();
      $.ajax({
        type: 'POST',
        url: 'testme.php',
        success: function(data) {
          $("p").text(data);
        },
        complete: function() {      
          // 无论请求成功/失败都隐藏遮罩，避免网络报错时遮罩卡着关不掉
          $('#loading').hide();
        }
      });
    },
    cancel: function() {
      // 点击No直接关闭弹窗，不需要额外操作
      return;
    }
  });
});

注意：把之前写的$(window).load里隐藏loading的逻辑删掉，统一放到上面的DOM ready回调里就行，避免加载时序冲突。

3. 细节检查 #

• 提交按钮要保留type="button"属性，不要用默认的submit类型，不然会触发表单默认跳转
• 如果确认框样式显示异常，检查插件目录里有没有配套的CSS文件，按路径在head里引入即可
• 后续不要再重复引入其他版本的jQuery，否则所有基于jQuery的插件都会失效

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