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 – 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...
Primer contacto con jQuery Como indican en la web oficial, jQuery es una librería para JavaScript que facilita la programación en las tareas de eventos, crear animaciones y efec...
jQuery – Conseguir el texto de la opción sel... En un desplegable, nos puede interesar saber el texto que se muestra de la opción seleccionada. Lo veremos mucho mejor con un ejemplo que puede aclara...
jQuery como seleccionar una opción de Select Código muy práctico para utilizarlo una vez recibimos datos vía AJAX y debemos seleccionar una de las opciones: Tarragona Albacete Castellón A...

Deja un comentario

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

*