Встроенная кнопка подтверждения

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>


<div class="topnav" id="myTopnav">
     <a href="{{ url_for('dashboard') }}" class="active">Dashboard</a>
     <a href="javascript:void(0);" class="icon" onclick="myFunction()">
     <i class="fa fa-bars"></i>
     </a>
     <form action="{{ url_for('search') }}" method="get" class="navbar-form navbar-left">
     <div class="form-group">
          <input type="text" name="name" class="form-control" placeholder="Name...">
     </div>
     <button type="submit" class="btn btn-default">Search</button>
    </form>
    <a href="{{ url_for('new_nadador') }}">New</a></li>
    <a href="{{ url_for('nadadores') }}">List swimmers</a></li>

</div>
<script>
 function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
 }
</script>


<div class="container">
    {# Flashed messages #}
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
     {% for category, message in messages %}
      <div class="alert alert-{{ category }}" role="alert">{{ message }}</div>
     {% endfor %}
    {% endif %}
    {% endwith %}
   {# End Flashed messages #}
 </div>
<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>

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

<table class="table table-hover">

 <tr>
    <th scope="col">ID</th>
    <th scope="col">Name</th>
    <th scope="col">Surname</th>
    <th scope="col">e-mail</th>
<th scope="col">Phone</th>
<th scope="col"></th> 
<th scope="col"></th>
</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="¿Are you sure to delete?" #} value="Delete">
      </form>
      <a class="btn btn-primary pull-right" href="{{ url_for('edit_nadador', id=nadador.id) }}">Edit</a>
    </div>
  </td>
{% endfor %}
</table>


<div id="copyright">
  Derechos reservados 2020 &copy; (022)
</div>
{% endblock %}

Я прилагаю скриншот экрана, где отображаются две кнопки. Кнопка Edit работает отлично; кнопка Удалить не отображает вопрос подтверждения перед удалением записи.

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