0

Bueno estoy intentando generar el evento click en una tabla de datos dinámica (tbody), el cual al hacer click sobre la tabla se ejecuta el evento, luego los filtro con un if por su name (Editar, Eliminar), ese name está en los button y en las etiquetas I de fontawesome.

El problema que surge es que el evento ya filtrado solo ocurre cuando yo ejecuto un click en los bordes del button. Si yo quiero ejecutar un click al medio del button el evento no ocurre.

Ya intenté solucionarlo de varias formas, entre una de ellas fue agregarle el name a la etiqueta I de fontawesome, otra forma fue con un evento en el document ///$(document).on("click", "btn", (e)=>{}), los cuales siguen con el mismo problema.

Recurro a la plataforma ya que no he encontrado información de este estilo.

El button quedaría de la siguiente manera.

<button id="btnEditar" data-id="1" name="editar" class="btn btn-success">
    <i data-id="1" name="editar" class="fas fa-edit"></i>
</button>

A continuacion les dejo la tabla y el Script de jQuery con el que intento hacer el evento click.

    <div class="container-fluid">
            <div class="col">
                <div class="card bg-secondary">
                    <div class="card-body">
                        <table id="table_id" class="display">
                            <thead class="text-center">
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Nombre</th>
                                    <th scope="col">Apellido</th>
                                    <th scope="col">DNI</th>
                                    <th scope="col">Fecha de Nacimiento</th>
                                    <th scope="col">Dirección</th>
                                    <th scope="col">Provincia</th>
                                    <th scope="col">Nacionalidad</th>
                                    <th scope="col">Email</th>
                                    <th scope="col">Teléfono</th>
                                    <th scope="col">Editar</th>
                                    <th scope="col">Eliminar</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                <tr id="1">
                                    <th scope="row">1</th>
                                    <td>Pepe</td>
                                    <td>Lui</td>
                                    <td>1234</td>
                                    <td>10/10/1996</td>
                                    <td>Calle falta 1234</td>
                                    <td>Cordoba</td>
                                    <td>Peru</td>
                                    <td>[email protected]</td>
                                    <td>0303456</td>
                                    <td>
                                        <!--Este es el button para editar -->
                                        <button id="btnEditar" data-id="1" name="editar" class="btn btn-success">
                                            <i data-id="1" name="editar" class="fas fa-edit"></i>
                                        </button>
                                    </td>
                                    <td>
                                        <!--Este es el button para Eliminar-->
                                        <button class="btn btn-danger" data-id="1" name="eliminar" data-toggle="modal"
                                            data-target="#exampleModal">
                                            <i class="fas fa-trash-alt" data-id="1" name="eliminar"></i>
                                        </button>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <script type="text/javascript">
        
        $('#table_id').click((e) => {

            if (e.target.name === "eliminar") {
                alert("Eliminar");
            }

            if (e.target.name === "editar") {
                alert("Editar");
            }

        });

    </script>

Gracias y disculpen las molestias.

2
  • 2
    Tuve el mismo problema, lo que encontré en su día, era pasar directamente la fuente fontawesome al botón, algo como <button class="btn btn-danger fas fa-trash-alt"></button>
    – D.Bulten
    Commented el 16 nov. 2021 a las 16:43
  • 1
    Como comenta @DBE es cuestión que usas el target name, y el boton tiene su nombre y el es independiente, debes meter la clase dentro del mismo boton Commented el 16 nov. 2021 a las 16:46

1 respuesta 1

1

La solución es llamar al botón de eliminar para hacer la función.

Si el botón tiene una id, se le llama por su id (siendo las id's únicas). Si no, se le llama por su clase, que en éste caso es: btn btn-danger. A mi parecer es mejor agregarle a éste botón otra clase único para el evento de jQuery.

En éste caso, le agregué una id, y una clase: btn-eliminar:

<button id="btn-eliminar" class="btn btn-danger btn-eliminar" data-id="1" name="eliminar" data-toggle="modal" data-target="#exampleModal">
    <i class="fas fa-trash-alt" data-id="1" name="eliminar"></i>
</button>

Para el caso de jQuery sería así, usando la id que agregué (modificando un poquito):

$('#btn-eliminar').on("click" function(e) {
 
 if (e.target.name === "eliminar") {
  alert("Eliminar");
 }

 if (e.target.name === "editar") {
  alert("Editar");
 }

});

Es importante también mejorar tu botón de esta manera, pero tal vez requiera modificar el estilo del botón con la clase: .btn-eliminar:before, y arreglar el icono.

<button id="btn-eliminar" class="btn btn-danger btn-eliminar fas fa-trash-alt" data-id="1" name="eliminar" data-toggle="modal" data-target="#exampleModal"></button>
1
  • Hola @Narciso Aifuz si el problema es que la tabla se genera dinamicamente y el ID debe ser unico, y el evento tiene que ser del document o en este caso se me ocurrio del tbody. Despues con respecto al incorporar el Icon adentro del button me parece la mejor opcion y la que estoy implementando en este momeno, Gracias. Commented el 16 nov. 2021 a las 17:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.