内嵌确认按钮

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() {&nbsp; &nbsp; if (confirm("Confirm")) {&nbsp; &nbsp; &nbsp; return true&nbsp; &nbsp; }&nbsp; &nbsp; 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">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">CI</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Nombre</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Apellido</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Correo Electronico</th>&nbsp; &nbsp; <th scope="col">Telefono</th>&nbsp; &nbsp; <th scope="col"></th> <!-- Espacio de columna para el boton Editar&nbsp; &nbsp;-->&nbsp; &nbsp; <th scope="col"></th> <!-- Espacio de columna para el boton Eliminar -->&nbsp; &nbsp; </tr>&nbsp; &nbsp; {% for nadador in nadadores %}&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ nadador.cedula }}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ nadador.name }}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ nadador.surname }}</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{{ nadador.email }}</td>&nbsp; &nbsp; &nbsp; &nbsp;<td>{{ nadador.phone }}</td>&nbsp; &nbsp; &nbsp; <td class="text-right">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form action="{{ url_for('nadadores_delete') }}" method="post" class="pull-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="hidden" name="id" value="{{ nadador.id }}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<input type="submit" class="btn btn-danger" data-toggle="confirmation" data-title="¿Esta seguro?" value="Eliminar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="btn btn-primary pull-right" href="{{ url_for('edit_nadador', id=nadador.id) }}">Editar</a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; {% endfor %}&nbsp; &nbsp; </table>{#&nbsp;&nbsp; Solution:&nbsp; JS&nbsp; https://getbootstrap.com/docs/4.0/getting-started/introduction/&nbsp; Many components require the use of JavaScript to function. Specifically, they&nbsp;&nbsp; require jQuery, Popper.js, and JavaScript plugins.&nbsp;&nbsp; Place the following TAG script's near the end of your pages, right before the closing&nbsp;&nbsp; body tag, to enable them. jQuery must come first, then Popper.js, and then our&nbsp;&nbsp; JavaScript plugins.&nbsp;&nbsp;&nbsp;#}&nbsp; &nbsp; <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>&nbsp; &nbsp; <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>&nbsp; &nbsp; <script src="{{ url_for('static', filename='js/bootstrap-confirmation.min.js') }}"></script>&nbsp; &nbsp; <script src="{{ url_for('static', filename='js/main.js') }}"></script>&nbsp;{% endblock %}