jquery Bootstrap 弹出窗口表单提交确认使用popConfirm不触发表单提交

x8goxv8g  于 2023-04-29  发布在  jQuery
关注(0)|答案(1)|浏览(287)

确认对话框在我的所有。btn-danger但是每当我点击yes我的表单就不会提交,所以我添加了一个控制台。log callback来查看我的表单是否有问题,结果是我的回调没有被触发。
我用的是bootstrap 4。3.1,jQuery v3.3.1和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>

在我的脚本中,我添加了以下内容:

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

uxhixvfz1#

我一直在阅读这方面的内容,并在JS小提琴中捣乱,这是我发现的。popConfirm没有onYesonConfirm这样的事件。
我发现它所做的是查看绑定到目标元素的单击事件,并首先触发确认。

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

如果在.popConfirm之后绑定单击,将无法工作
编辑:这适用于on,bind和html onclick事件。只是我发现的另一个金块

相关问题