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.
<button class="btn btn-danger fas fa-trash-alt"></button>