2

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>
2
  • Prueba a definir el id en el elemento <a> en lugar de en el <i> Commented el 31 ago. 2022 a las 10:09
  • @PabloLozano funciona pero sucede algo extraño. Te pongo en contexto: el botón en cuestión lo que hace es duplicar filas de una tabla mediante ajax. Si con la modificación realizada (ver pregunta, ya que, pondré el código modificado) haces clic en el borde del botón, todo funciona correctamente, no obstante, si haces clic en el icono funciona pero no muestra la fila creada, a no ser que recargues. Rarísimo!! no sé por qué sucede esto.
    – Carlos
    Commented el 31 ago. 2022 a las 10:30

1 respuesta 1

1

Para solucionar tu problema te recomiendo realizar los siguientes cambios:

Agregar el manipulador de eventos en el elemento <a> que contenga un elemento cuya clase sea duplicarFila para que puedas pulsar en la totalidad del botón, y no solo en el texto:

$("a:has(>.duplicarFila)")

Como el evento lo recibe el elemento <a> y los datos están almacenados en el elemento hijo cuya clase es duplicarFila, deberemos buscar al hijo que coincida con dicho selector para acceder a los datos:

let hijo = $(this).find(".duplicarFila");

Aquí tienes el código funcionando:

$("a:has(>.duplicarFila)").click(function(e) {
  let hijo = $(this).find(".duplicarFila");
  let _sid = hijo.data("sid");
  let _tid = hijo.data("tid");
  let _d = hijo.data("d");
  console.log(_sid, _tid, _d);
});
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<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>

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.