内嵌确认按钮

Question

我是模态按钮的新手。由于某种原因，“删除”按钮不显示“您确定要删除吗？”的问题。并简单地执行删除操作。我需要显示确认，这是一个重要的验证。我一直在寻找解决方案，但目前还没有结果。我附上源代码。任何指导将不胜感激。谢谢。<style>  body {    margin: 0;    font-family: Arial, Helvetica, sans-serif;}.topnav {    overflow: hidden;    background-color: #333;}.topnav a {    float: left;    display: block;    color: #f2f2f2;    text-align: center;    padding: 14px 16px;    text-decoration: none;    font-size: 17px; } .topnav a:hover {    background-color: #ddd;    color: black; } .topnav a.active {    background-color: #4CAF50;    color: white; } .topnav .icon {    display: none; } p.centrartextoparrafo {    text-align: center;    padding: 16px 16px;    text-decoration: none;    font-size: 17px; } h1.centrartextoh1titulopaginaprincipal {    text-align: center; } h2.centrartextoh2titulopaginaprincipal {    text-align: center; } #copyright {    float: left;    padding-bottom: 10px;    padding-top: 10px;    text-align: center;    bottom: 0px;    width: 100%; } table.center {    margin-left:auto;     margin-right:auto; } table, th, td {    border: 20px solid white; } @media screen and (max-width: 600px) {    .topnav a:not(:first-child) {display: none;}    .topnav a.icon {    float: right;    display: block; } } @media screen and (max-width: 600px) {    .topnav.responsive {position: relative;}    .topnav.responsive .icon {    position: absolute;    right: 0;    top: 0; } .topnav.responsive a {    float: none;    display: block;    text-align: left; }   }</style>我附上显示两个按钮的屏幕截图。编辑按钮工作正常；删除按钮在删除记录之前不会显示确认问题。

Answer 1

onClick事件解决方案

function checkFunction() {

    if (confirm("Confirm")) {

      return true

    }

    return false

}

<input type="submit" onclick="return checkFunction();" class="btn btn-danger" data-toggle="confirmation" {# data-title="¿Are you sure to delete?" #} value="Delete">

Answer 2

<h2 class="centrartextoh2titulopaginaprincipal">Nadadores</h2>

<table class="table table-hover">

    <tr>

        <th scope="col">CI</th>

        <th scope="col">Nombre</th>

        <th scope="col">Apellido</th>

        <th scope="col">Correo Electronico</th>

    <th scope="col">Telefono</th>

    <th scope="col"></th> <!-- Espacio de columna para el boton Editar   -->

    <th scope="col"></th> <!-- Espacio de columna para el boton Eliminar -->

    </tr>

    {% for nadador in nadadores %}

        <tr>

            <td>{{ nadador.cedula }}</td>

            <td>{{ nadador.name }}</td>

            <td>{{ nadador.surname }}</td>

            <td>{{ nadador.email }}</td>

       <td>{{ nadador.phone }}</td>

      <td class="text-right">

        <div class="row">

          <form action="{{ url_for('nadadores_delete') }}" method="post" class="pull-right">

           <input type="hidden" name="id" value="{{ nadador.id }}">

           <input type="submit" class="btn btn-danger" data-toggle="confirmation" data-title="¿Esta seguro?" value="Eliminar">

          </form>

          <a class="btn btn-primary pull-right" href="{{ url_for('edit_nadador', id=nadador.id) }}">Editar</a>

        </div>

      </td>

    {% endfor %}

    </table>

{# 

  Solution:

  JS

  https://getbootstrap.com/docs/4.0/getting-started/introduction/

  Many components require the use of JavaScript to function. Specifically, they 

  require jQuery, Popper.js, and JavaScript plugins. 

  Place the following TAG script's near the end of your pages, right before the closing 

  body tag, to enable them. jQuery must come first, then Popper.js, and then our 

  JavaScript plugins.  

 #}

    <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>

    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

    <script src="{{ url_for('static', filename='js/bootstrap-confirmation.min.js') }}"></script>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

 {% endblock %}