Tengo una tabla con varios botones, uno de ellos sirve para duplicar la última fila de la tabla.
Tengo el siguiente código:
<a class="btn btn-sm float-right btn-primary text-white" title="Agregar fila">
<i id="btn_lunes" data-sid = "1" data-tid = "1" data-d = "lunes" class="duplicarFila material-icons mic">add</i>
</a>
$('.duplicarFila').click(function(e) {
let _sid = $(this).data("sid");
let _tid = $(this).data("tid");
let _d = $(this).data("d");
let _token = '{{ csrf_token() }}';
$.ajax({
//Código necesario para notificarle al servidor.
},
success: function(data) {
if (data['success'] == true){
toastr.success('Agregada correctamente. Recargando página', 'Fila');
//Código necesario para duplicar fila
}else{
toastr.error('Error al añadir nueva fila. Recargando página', 'Fila');
}
},
error: function(XMLHttpRequest, textStatus, errorThrown){
toastr.error('Error al añadir nueva fila. ' + JSON.parse(XMLHttpRequest.responseText).message, 'Fila');
}
});
})
Estoy utilizando Bootstrap 4 con HTML, la idea es generar un botón con el icono "add" de Google icons, el problema es que si no haces clic exactamente en el icono, el botón no funciona
¿Cómo puedo hacer que el evento clic responda tanto si se presiona en el icono como también en los bordes del botón?
Luego de la modificación realizada:
<a class="duplicarFila btn btn-sm float-right btn-primary text-white" title="Agregar fila" id="btn_domingo" data-sid = "1" data-tid = "1" data-d = "domingo"><i class="material-icons mic">add</i></a>
<a>
en lugar de en el<i>