1

Hola se le puede asignar un evento con Jquery a un atributo HTML inventodo, como en este caso

<td><button idAddTarjeta="${tarjeta.setID()}" class="btnAgregar">Agregar</button></td>
<td><button idDeleteTarjeta="${tarjeta.setID()}" class="btnDelete">Eliminar</button></td>

yo le quiero asignar un evento a esos atributos (idAddTarjeta y idDeleteTarjeta), ya que no puedo ponerles ID porque se repetirian.

1 respuesta 1

0

Podrías hacer uso de los atributos de datos de HTML5. Estos te pueden servir para precisamente lo que buscas, añadir meta-datos a tus elementos para después usarlos desde Javascript.

Luego, a través de la función data() de JQuery puedes acceder a ellos de manera cómoda.

$(function () {
  $('.btnAgregar').click(function() {
    const elemento = $(this);
    const idTarjeta = elemento.data('id-tarjeta');
    
    console.log('Se agrega', idTarjeta);
  });
  
  $('.btnDelete').click(function() {
    const elemento = $(this);
    const idTarjeta = elemento.data('id-tarjeta');
    
    console.log('Se borra', idTarjeta);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td><button data-id-tarjeta="122" class="btnAgregar">Agregar</button></td>
<td><button data-id-tarjeta="122" class="btnDelete">Eliminar</button></td>

Referencias: Atributos de datos, data()

3
  • Hola @phpMyGuel gracias por ayudarme, pero me surgio un problema al utilizar el atributo data en JQuery con el evento click( e.data('id') e.target.data('id') )con estos 2 intentos solo obtengo puros errores Commented el 9 nov. 2021 a las 20:29
  • La función data() es de JQuery y con event.target obtienes un objeto que no es de JQuery, por lo que no podrías usarla sobre este. Dentro de una función click() de JQuery, para obtener el elemento que la está disparando, es a través de $(this), tal y como aparece en mi ejemplo.
    – phpMyGuel
    Commented el 10 nov. 2021 a las 11:31
  • Si perfecto, lo pude hacer con otra funcion dataset, pero re bien, gracias..! Commented el 10 nov. 2021 a las 16:55

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.