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" />
dataset
. SaludosforEach
pero no me funciona.