Does not fire show.bs.modal event

Question

Personal talk blz?

I have the following impasse in my project using the event on show.bs.modal the button does not trigger the event.. follows below:

Index:

<?php 

header("Cache-Control: no-cache, must-revalidate");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

require_once("authenticate.php");

login();

$user = wp_get_current_user();

    require_once 'cfg.php';
require_once 'functions.php';
require_once DBAPI; 
$db = open_database();

index();

    include(HEADER_TEMPLATE);

if ($db) : ?>

<header>
    <div class="row">
        <div class="col-sm-6">
            <h2>Usuários</h2>
        </div>
        <div class="col-sm-6 text-right h2">
            <a class="btn btn-primary" href="index.php"><i class="glyphicon glyphicon-refresh"></i> Atualizar</a>
        </div>
    </div>
</header>

<?php if (!empty($_SESSION['message'])) : ?>
    <div class="alert alert-<?php echo $_SESSION['type']; ?> alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <?php echo $_SESSION['message']; ?>
    </div>
    <?php clear_messages(); ?>
<?php endif; ?>

<hr>

<div class="table-responsive">
    <table class="table table-hover table-condensed" id="lstUsers">
        <thead>
            <tr>
                <th>email</th>
                <th>chave</th>
                <th>Opções</th>
            </tr>
        </thead>
        <tbody>
            <?php if ($users) : ?>
            <?php foreach ($users as $user) : ?>
                <tr>
                    <td><?php echo $user['email']; ?></td>
                    <td><?php echo $user['chave']; ?></td>
                    <td class="actions">
                        <a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delete-modals" data-user="<?php echo $user['email'] ?>">
                            <i class="glyphicon glyphicon-trash"></i> Excluir
                        </a>
                    </td>
                </tr>
            <?php endforeach; ?>
            <?php else : ?>
                <tr>
                    <td colspan="6">Nenhum registro encontrado.</td>
                </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>

ERROR: Unable to Connect to Database!

modal

<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>

JS

$(Document). ready(Function() {

$('#lstUsers').dataTable({
    "iDisplayLength": 10,
    "bAutoWidth" : false,
    "aoColumns" : [
    { sWidth : "30%"},
    { sWidth : "55%"},
    { sWidth : "15%"},
          ],
          'oLanguage':{                 
            'oPaginate':{'sFirst': "Primeira",'sLast': "Útima",'sNext': "Próxima",'sPrevious': "Anterior"},                     
            'sInfo': "_TOTAL_ registros encontrados, mostrando (_START_ à _END_)",
            'sSearch': "Busca:",
            'sInfoFiltered': 'Total',
            'sLengthMenu': 'Mostrar <select>'+
              "<option value='10'>10</option>"+
              "<option value='20'>20</option>"+                 
              "<option value='-1'>Todos</option>"+
              "</select> registros."    
            }
});

});

/**
* Passa os dados do email para o Modal, e atualiza o link para exclusão
*/

$(document).on('show.bs.modal','#delete-modals', function () {
    console.log('delete modal');

    var button = $(event.relatedTarget);
    var email = button.data('user');

    var modal = $(this);
    modal.find('.modal-title').text('Excluir email :' + email);
    modal.find('#confirm').attr('href', 'delete.php?email=' + email);
});     

Answer 1

Hello. I believe you are missing code for your modal, since you are using Bootstrap. I will post here the code of how I usually do.

Table:

<td class="actions">
   <a href="#" data-href="delete.php?email=<?php echo $user['email'] ?>" data-toggle="modal" data-target="#delete-modals"><i class="glyphicon glyphicon-trash"></i> Excluir</a>
</td>

Modal:

<div class="modal fade" tabindex="-1" role="dialog" id="delete-modals">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirmar exclusão</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Realmente deseja excluir este registro?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button> 
        <a class="btn btn-danger text-white btn-excluir">Excluir</a>
      </div>
    </div>
  </div>
</div>

Javascript:

$('#delete-modals').on('show.bs.modal', function(e) {
  $(this).find('.btn-excluir').attr('href', $(e.relatedTarget).data('href'));
});

The modal code is based on Bootstrap 4. I hope it helps.