php - Dropdown-menu links in jquery datatable is not working when click on them

Question

sorry for disturbing you. I tried to find the solution for my doubt from the last three days, but without success. So I'm here to ask for your help.

I have a jQuery datatable in my PHP page with a column with 3 options (dropdown-menu to View, Edit and Delete buttons):

<table id="projetos" class="datatable table table-striped table-bordered table-hover nowrap">
            <thead>
                <tr>
                    <th>ID do Projeto</th>
                    <th>Numero da Propriedade</th>
                    <th>Nome Propriedade</th>
                    <th>Tipo do Projeto</th>
                    <th>Data da Conclus?o</th>
                    <th>Quantidade de Dias</th>
                    <th class="datatable-nosort">A??es</th>
                </tr>
            </thead>
            <tbody>
                <?php while ($reg = mysqli_fetch_array($result)) {
                                echo '<tr>
                                        <td>' . $reg['ID'] . '</td>
                                        <td>' . $reg['Numero'] . '</td>
                                        <td>' . $reg['Propriedade'] . '</td>
                                        <td>' . $reg['Tipo'] . '</td>
                                        <td>' . $reg['Termino'] . '</td>
                                        <td>' . $reg['Dias'] . '</td>
                                        <td>
                                            <div class="dropdown">
                                                <a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">
                                                    <i class="dw dw-more"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#bd-view-modal-lg" type="button"><i class="dw dw-eye"></i> Exibir</a>
                                                    <a class="dropdown-item" href="#"><i id="Edit'. $reg['ID'] .'" class="dw dw-edit2"></i> Editar</a>
                                                    <a class="dropdown-item" href="#"><i class="dw dw-delete-3"></i> Deletar</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>';
                            }
                            ?>
            </tbody>
        </table>

I'm trying to test the click event to run the selected option using this sample of code:

 $(document).ready(function() {

//Instancia a tabela de projetos
var projectTable = $('#projetos').DataTable({ select: { style: 'single' } });

$('#btnExportar').click(function() {
    alert("Chegou aqui, carregou o javascript js/projetos.js e você clicou no bot?o de exportar");

});

var linha = projectTable.rows().data[0][0];

//Pega o id do projeto ao clicar na linha da tabela
$(".dw dw-edit2").click(function() {
    alert("Chegou aqui, e você clicou no bot?o de Editar da linha " + linha);
});

});

Can you please help me to find the best way to solve my doubt?

Any help will be appreciated.

question from:https://stackoverflow.com/questions/65848984/dropdown-menu-links-in-jquery-datatable-is-not-working-when-click-on-them

Answer 1

Thanks for your reply.

I solved the issue doing the following: I put an ID on the dropdown-item:

<a class="dropdown-item delete" href="#" id="'.$reg['ID'] . '"><i class="dw dw-delete-3"></i> Deletar</a>

then I use its click evento to call the modal confirmation and run the ajax code to delete the record in the database.

//Pega o id do projeto ao clicar na linha da tabela para deletar
$(document).on('click', '.delete', function() {
    var id = $(this).attr("id");
    
    //Confirma se quer mesmo deletar
    $('#myLargeModalLabel').attr("class", "text-danger");
    $('#myLargeModalLabel').html("Confirma??o");
    $('#conteudoModal').attr("class", "modal-body text-info");
    $('#conteudoModal').html(`<h4>Tem certeza que deseja excluir este projeto (${id})?</h4><br><p>${proNumero}: ${proNome}</p>`);
    $('#btnConfirmaModal').attr("hidden", true);
    $('#bd-view-modal-lg').modal('show');
});