Asignar acción en jquery a múltiples enlaces

En muchas ocasiones nos interesa que al clicar sobre los enlaces de un apartado, el que sea, se ejecute una acción determinada. Pongamos un ejemplo:

Tengo un submenú en la parte izquierda con varios enlaces. Al clicar sobre alguno de ellos, queremos que muestre una ventana modal. Tenemos dos opciones, o aplicamos uno a uno la acción a realizar sobre cada enlace o:

Asignamos a todos los enlaces que nos interese una clase, en nuestro ejemplo .linkaccion

1
2
3
4
<a href="enlace1.html" class="linkaccion">Enlace 1</a>
<a href="enlace2.html" class="linkaccion">Enlace 2</a>
<a href="enlace3.html" class="linkaccion">Enlace 3</a>
<a href="enlace4.html" class="linkaccion">Enlace 4</a>

Ahora entra en acción jQuery asignando a todos los enlaces con la clase .linkaccion la función script deseada:

1
2
3
4
5
var btnAccionClick = function(e){
    alert("Boton clicado: "+ e.currentTarget.id);
}
 
$('.linkaccion').on('click', btnAccionClick);

Como veréis tenemos la función btnAccionClick() por un lado. Por otro a todos los enlaces con clase .linkaccion le asignamos dicha función que se ejecutará al clicar.

Artículos relacionados

jQuery datepicker, php, mysql y las fechas en form... Veamos un caso particular a la hora de programar con jquery ui. El componente DatePicker nos proporciona una manera muy visual y eficiente de insertar...
JQuery – Trigger – Como ejecutar un cl... En muchos ocasiones nos puede interesar simular el click de un usuario sobre un enlace. Dicho de otro modo, provocar el click en un enlace sin que sea...
jQuery – Tutorial 01 – Introducción Pequeño vídeo de unos 4 minutos que nos introduce a la librería jQuery. Qués es? Dónde informarse? Qué podemos hacer con esta librería? En el s...
jquery bootstrap TypeError: $(…) is null Que título mas raro para un post. Pues bien, detrás de él hay uno de los problemas que nos podemos encontrar al trabajar con jQuery y Bootstrap a la v...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*