jQuery click(): Controla los clicks del ratón en los elementos de tu web

Vamos a repasar la función jQuery click() tras haber repasado en el post anterior jQuery change(). De esta manera seguimos repasando las funciones básicas de jQuery.

jQuery click() se ejecuta cada vez que se hace click en un elemento del DOM. Bien sea una imagen, un input text, un párrafo, un button, un select, un radio button, un div…

Si necesitáis controlar un doble click usad la función jQuery dblclick().

Sintaxis de jQuery click()

Vamos con su sintaxis extraída de su documentación oficial.

Os la explico:

1. selector (obligatorio): Elemento de la web que comprobamos si ha sido clickado.
2. function (opcional): Función callback que se ejecuta cuando el elemento ha sido clickado.

Ejemplo para detectar el click en un input button e input text con jquery click()

En este primer ejemplo vamos a ver cómo detectar el click en un input text e input button de 3 maneras diferentes.

Las detecciones se harán con el click en un input con un name determinado, con un id determinado y con una class determinada:

Os explico el código superior:

• El primer control detecta el click sobre un input con name ‘nombre1’ y saca un mensaje por pantalla.
• El segundo control se activa cuando se hace click sobre un input text con id ‘nombre2’.
  He dejado comentado el código inferior en el ejemplo, el resultado es el mismo, pero la diferencia está en el click en cualquier elemento con id ‘nombre2’ sin tener que ser el elemento un input.
  
  $("#nombre2").click(function(){

  1	$("#nombre2").click(function(){

• El tercer control detecta cuando se hace click en un input button con class ‘nombre3’.
  Nuevamente he dejado comentado un código más simple para el ejemplo 3, es parecido al anterior, solo que esta vez el código comentado controla el click de cualquier elemento con class ‘nombre3’ sin tener que ser el elemento un input.
  
  $(".nombre3").click(function(){

  1	$(".nombre3").click(function(){

El código HTML de los 3 formularios es el siguiente:

Ejemplo para detectar el click en un radio button con jQuery Click()

En este nuevo ejemplo vamos a ver cómo se detecta el click en un radio button, en un post anterior repasé cómo obtener el valor de un radio button con jQuery.

Aquí tenéis el código del ejemplo:

Explicación del ejemplo:

1. Controlamos que se haga click en el radio button con name ‘edad’.
2. Sacamos en un alert el valor del radio button checkeado (seleccionado) con jQuery val().
3. Os he comentado en el ejemplo una línea con otra manera más elegante, se trata del valor del elemento actualmente clickado.
   
   alert("Bien!!!, la edad seleccionada es: " + $(this).val());

   1	alert("Bien!!!, la edad seleccionada es: " + $(this).val());

4. Está en vuestras manos usar una de las 2 formas expuestas, a mi me gusta más la opción comentada.

El código HTML de los radio buttons es el siguiente:

Ejemplo para detectar el click en imágenes, párrafos, divs y otros atributos con jQuery click()

En este tercer ejemplo vamos a ver cómo detectar clicks en otros tipos de elementos del DOM.  Para no mezclar un montón de líneas seguidas os he dividido el ejemplo en 3 partes.

Detección del click en una imagen:

Os explico este primer código:

•  Si os fijáis he realizado diferentes comprobaciones, las enumero: por nombre = ‘imagen’, por id = ‘idimagen, por una imagen con class = ‘claseimagen’ y por un objeto con class = ‘claseimagen’.

Detección del click en un párrafo:

Explicación:

• Ejemplo parecido al anterior, diferenetes comprobaciones para el click en un párrafo con jQuery. Los enumero: por párrafo con id = ‘idparrafo’, por id = ‘idparrafo’, por párrafo con clase = ‘claseparrafo’, por clase = ‘claseparrafo’.

Detección del click en div:

Os explico el tercer código de ejemplo:

• Se detecta el click en un div con id = ‘idcapa’, con id = ‘idcapa’, un div con class = ‘clasecapa’ y un class = ‘clasecapa’.

Integración de click() con jQuery on()

Os voy a poner un ejemplo para que veáis cómo sería la detección del click con la función on():

Y así sería la detección del click sobre el elemento con id = ‘mielemento’.

Otras funciones para detectar los eventos del ratón

• Funciones de jQuery para detectar las acciones del ratón

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM