1

Tengo un datatable donde genero un formatter que genera varios botones por cada ROW de esta celda, la idea es capturar el evento CLICK en cada botón marcando-lo como si fueran de la clase btn-change-status

<td style="">
    <a href="#" class="btn-change-status" data-id="1" data-status="1" style="color:black">
          <span style="font-size: 1em; color: lawngreen;">
              <i class="btn-change-status fas fa-check-square fa-2x" title="Cambiar estado a aceptado">
              </i>
          </span>
     </a>
</td>

El problema lo tengo en capturar el evento de dicho botón, he probado de esta manera

<script>
$(".btn-change-status").on("click", function() {
    event.preventDefault();
    alert('test1');
});

$(".btn-change-status").click( function(event) {
   event.preventDefault();
   alert('test2');
});
</script>
2
  • Ese <td> que nos muestras entiendo que lo generas dinamicamente y que no se encuentra creado de inicio en el DOM. ¿Correcto?
    – phpMyGuel
    Commented el 27 jul. 2021 a las 14:39
  • exacto @phpMyGuel
    – ilernet
    Commented el 27 jul. 2021 a las 14:41

1 respuesta 1

2

Lo que te está sucediendo es que en el momento de asignarle a los elementos .btn-change-status el evento click, al no encontrarse estos todavía creados en el DOM no lo están recibiendo.

Para evitar esto puedes vincularle el evento al document y a través del segundo parámetro (que es opcional) de la función on() decir que elemento quieres que lo dispare.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td style="">
    <a href="#" class="btn-change-status" data-id="1" data-status="1" style="color:black">
          <span style="font-size: 1em; color: lawngreen;">
              <i class="btn-change-status fas fa-check-square fa-2x" title="Cambiar estado a aceptado">
              </i>
              Pulsa
          </span>
     </a>
</td>

<script>
$(document).on("click", '.btn-change-status',  function() {
    event.preventDefault();
    alert('test1');
});
</script>

De esta manera, como el evento lo tiene el document siempre lo vas a tener disponible y en el momento en que el elemento pulsado sea el de la clase deseada se va a poder llamar sin ningún problema.

1
  • 2
    Muchas gracias por la explicación, lo he entendido y ya me funciona. 1000 gracias por todo !!!!!!!!
    – ilernet
    Commented el 27 jul. 2021 a las 14:49

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.