单击它们时，jquery数据表中的下拉菜单链接不起作用

Question

抱歉打扰了。从过去三天开始，我试图为我的疑问找到解决方案，但没有成功。所以我在这里寻求你的帮助。

我的 PHP 页面中有一个 jQuery 数据表，其中有一列有 3 个选项（查看、编辑和删除按钮的下拉菜单）：

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

我正在尝试使用此代码示例测试单击事件以运行所选选项：

 $(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);
});

});

你能帮我找到解决我疑惑的最佳方法吗？

我们将不胜感激。

Answer 1

感谢您的回复。

我通过以下方式解决了这个问题：我在下拉项目上放了一个 ID：

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

然后我使用它的click eventto调用模态确认并运行ajax代码删除数据库中的记录。

//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');
});