Bootstrap popover form submit confirmation using popConfirm not firing form submit

Question

The confirmation dialogue works on all my .btn-danger but whenever I click on the yes my form doesn't submit, so I added a console.log callback to see if there is an issue with my form, turns out my callback is not being fired.

I am using bootstrap 4.3.1, jQuery v3.3.1 and PopConfirm 0.4.5.

<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>

Then in my script I have added the following:

$(".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")
 }
});

Answer 1

I've been reading up on this and messing inside a JS fiddle and this is what I found out. The popConfirm doesn't have events like onYes or commonly onConfirm.

What I have found out it does is looks at the click events bound to the element/s you are targeting and fires the confirmation first.

$(".btn-danger").on("click", function(){
    //Do what you need here
    console.log("popconfirm confirmed");
});

$(".btn-danger").popConfirm({
    title: "Delete Item",
    content: "Are you sure you want to delete this item?",
    placement: "right",
    container: false
});

It will not work if you bind the click after the .popConfirm

EDIT: This works for on, bind and html onclick events. Just another nugget I found