使用PopConfirm实现Bootstrap表单提交确认时，表单未提交且回调未触发

带.btn-danger类的删除按钮，确认对话框可正常显示，但点击“确定”后表单无法提交，且onYes回调中的console.log完全未触发。使用技术版本：Bootstrap 4.3.1、jQuery v3.3.1、PopConfirm 0.4.5。

相关代码如下：

HTML 代码 #

<form class="userForm" id="userForm-<%=userId%>" value="<%=userId%>">
   <tr>
      <td>
         <p><%out.print(u.login);%></p>
         <input form="userForm-<%=userId%>" type="hidden" name="login"
            value="<% out.print(u.login);%>"/>
      </td>
      <td><input form="userForm-<%=userId%>" class="password" type="password" name="password"/></td>
      <td>
         <select form="userForm-<%=userId%>" name="type">
            <option value="<% out.print(Gestion_Authentification.USER_TYPE_PARAM_VALUE_ADMIN); %>" <%
               if (u.type == Gestion_Authentification.UserType.Admin) {
                   out.print("selected");
               } %>>Administrateur
            </option>
            <option value="<% out.print(Gestion_Authentification.USER_TYPE_PARAM_VALUE_USER); %>" <%
               if (u.type == Gestion_Authentification.UserType.User) {
                   out.print("selected");
               } %>>Utilisateur
            </option>
            <option value="<% out.print(Gestion_Authentification.USER_TYPE_PARAM_VALUE_CONIFG); %>" <%
               if (u.type == Gestion_Authentification.UserType.Config) {
                   out.print("selected");
               } %>>Configuration
            </option>
            <option value="<% out.print(Gestion_Authentification.USER_TYPE_PARAM_VALUE_ARCHIVES); %>" <%
               if (u.type == Gestion_Authentification.UserType.Archive) {
                   out.print("selected");
               }%>>Archives
            </option>
         </select>
      </td>
      <td class="widthActionButton">
         <button form="userForm-<%=userId%>" type="submit" name="action" value="edit"
            class="btn btn-xs btn-success btn-block btn-sm">Modifier
         </button>
         <button form="userForm-<%=userId%>" type="submit" value="remove"
            class="btn btn-xs btn-danger btn-block btn-sm">Supprimer
         </button>
      </td>
   </tr>
</form>

JS 代码 #

$(".btn-danger").popConfirm({
 title: "Delete Item",
 content: "Are you sure you want to delete this item?",
 placement: "right",
 container: false,
 onYes: () => {
  // Get the closest form to the clicked button and submit it
  console.log("popconfirm confirmed")
 }
});

1. 版本兼容性冲突：PopConfirm 0.4.5与Bootstrap 4的事件拦截逻辑存在bug，默认阻止了按钮原生提交事件，但未正确触发onYes回调。
2. 表单关联方式异常：按钮通过form属性跨元素关联表单，而非直接嵌套在表单内，导致PopConfirm无法正确识别按钮与表单的绑定关系。
3. 回调上下文丢失：使用箭头函数作为onYes回调，绑定了外部上下文，无法获取当前点击的按钮实例，后续无法定位并提交对应表单。

方案1：修正回调逻辑与事件拦截 #

修改JS代码，改用普通函数作为onYes回调，手动阻止按钮原生提交事件，在回调中主动提交关联表单：

$(".btn-danger").popConfirm({
  title: "删除确认",
  content: "确定要删除该条目吗？",
  placement: "right",
  container: false,
  onYes: function() {
    // 获取当前按钮关联的表单ID并提交
    const targetForm = $("#" + $(this).attr("form"));
    targetForm.submit();
    console.log("确认删除，表单已提交");
  }
}).on("click", function(e) {
  // 阻止原生提交事件，避免提前触发
  e.preventDefault();
});

方案2：调整HTML结构（推荐） #

将表单改为标准嵌套结构，确保按钮直接包含在表单内（若业务允许），避免使用form属性跨元素关联：

<table>
  <form class="userForm" id="userForm-<%=userId%>" value="<%=userId%>">
    <tr>
      <!-- 其他单元格内容保持不变 -->
      <td class="widthActionButton">
        <button type="submit" name="action" value="edit" class="btn btn-xs btn-success btn-block btn-sm">Modifier</button>
        <button type="submit" value="remove" class="btn btn-xs btn-danger btn-block btn-sm">Supprimer</button>
      </td>
    </tr>
  </form>
</table>

标准结构能让PopConfirm更稳定地识别按钮与表单的关联，减少兼容性问题。

方案3：升级PopConfirm版本 #

如果项目允许，升级到适配Bootstrap 4的PopConfirm最新稳定版本，新版本修复了旧版本的事件绑定bug，能更可靠地处理回调触发与表单提交逻辑。

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