2

tengo un inconveniente. Quiero dejar jQuery y trabajar todos mis proyectos con Javascript Puro. Estoy haciendo un CRUD y Quiero extraer el id de cada item por medio del atributo dentro de cada boton data-id.

jQuery:

$('body').on('click', '.btn-Editar', function(){
        var Id = $(this).attr('data-id'); /* Id */
});

Pero como se hace en Javascript?

Javascript:

document.addEventListener('click', function(e){
    e.preventDefault();

     var elemento = document.querySelector('.btn-Editar');
     var dataID = elemento.getAttribute('data-id');

     console.log(dataID);
});

He intentado en Javascript pero sin éxito.

5
  • 3
    Agrega tu html por favor
    – user128299
    el 23 jun. 2020 a las 21:11
  • Además falta que expliques el error o resultado que obtienes con este código
    – user128299
    el 23 jun. 2020 a las 21:23
  • <button type="button" data-id="'.$data->IdA.'" class="btn-Editar mr-1 bg-gradient-primary btn btn-primary btn-sm"><i class="far fa-eye"></i></button> No se si tengo que recorrer cada item por medio de un bucle o que para obtener el Id? el 23 jun. 2020 a las 21:25
  • 1
    Lo que buscas es dataset. Saludos el 23 jun. 2020 a las 21:30
  • como los recorro? probe con forEach pero no me funciona. el 24 jun. 2020 a las 3:40

2 respuestas 2

4

Podrías implementar un tipo de escucha específico mediante el uso de querySelectorAll(), como muestra el código, te permitirá alcanzar elementos agrupados según ciertos criterios. Por ejemplo, para este caso, te interesaría alcanzar únicamente los elementos de tipo button que tengan la clase btn-Editar. La posibilidad que da este función para combinar selecciones es enorme.

Para leer los atributos data- sugiero que uses la forma recomendada, que es mediante el uso de dataset, tal y como explica la documentación.

Veamos un ejemplo. He puesto a propósito, un botón que no entra en el grupo de escucha, así como un input con la misma clase del grupo de escucha, pero que no entra, al no ser del tipo button. Con esto podrás resolver el problema de una manera óptima.

/*
  Con querySelectorAll haremos un alcance más específico
  el selector usado aquí signfica simplemente:
  "selecciona todos los elementos de tipo button
   que tengan la clase btn-Editar"
   Significa que otros botones quedarán aislados de esta escucha
   así como otros elementos que tengan esa clase, pero no sean button
*/
var editButtons = document.querySelectorAll('button.btn-Editar');

/*
  A los elementos alcanzados por el criterio antes indicado
  le asignamos un listener...
  Significa que el click en cualquiera de esos elementos
  ejecutará el código contenido en la función
  en este caso recuperar el data-id
*/
editButtons.forEach(function(item, idx) {
  item.addEventListener('click', function() {
    /*
       Usaremos la forma que existe para leer los atributos data
       que es dataset
    */
    console.log(item.dataset.id);
  });
});
<button class="btn-Editar" data-id="id1">Botón 1</button>
<br />

<button class="btn-Editar" data-id="id2">Botón 2</button>
<br />

<button class="btn-Borrar" data-id="id3">No escuchado</button>
<br />

<input class="btn-Editar" value="For test, no es escuchado" />

4
  • Hize tu sugerencia pero no me da los resultados esperados. Esos botones lo tengo dentro de un Datatables en Laravel, pero no si lo tengo que mapear o que??? Ya no quiero seguir usando jQuery pero no logro obtener los resultados deseados en Javascript. el 24 jun. 2020 a las 3:38
  • 1
    @JrGregorioHPV agrega a la pregunta un pequeño trozo del HTML que genera los botones. Mi respuesta está basada en lo que vi en tu código jQuery, pero puede que los elementos tengan otro nombre de clase, o que sean del tipo input, en cuyo caso habría que indicarlo en el selector.
    – A. Cedano
    el 24 jun. 2020 a las 9:19
  • Así tengo el boton HTML cuyo objeto en PHP $data->IdA es donde se muestra el Id de cada botón <button type="button" data-id="'.$data->IdA.'" class="btn-Editar mr-1 bg-gradient-primary btn btn-primary btn-sm"><i class="far fa-eye"></i></button> el 24 jun. 2020 a las 22:35
  • 1
    Revisa el código fuente y copia pega la parte de los button y agrégala a la pregunta. Si lo tienes como dices ahí debería funcionar, los botones de mi ejemplo son exactamente iguales y funciona, si no te funciona puede que en el HTML final se estén creando de otro modo. Tampoco has dicho qué resultados estás obteniendo, @JrGregorioHPV.
    – A. Cedano
    el 24 jun. 2020 a las 22:53
1

Quizá tengas varios elementos con la misma clase (.btn-editar). Quizá puedas hacer algo así:

document.addEventListener('click', function(e){
    e.preventDefault();
     var elemento = e.target;
     var dataID = elemento.getAttribute('data-id');

     console.log(dataID);
});

También podrías usar dataset (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

1
  • Si, tengo varios elementos de la misma clase ya que se trata de un boton Editar en donde hay varios rows. el 23 jun. 2020 a las 21:57

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.