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().
Vamos con su sintaxis extraída de su documentación oficial.
$(selector).click(function)
Os la explico:
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:
$(document).ready(function(){ $("input[name=nombre1]").click(function(){ alert('Evento click sobre un input text con nombre="nombre1"'); }); //$("#nombre2").click(function(){ $("input[id=nombre2]").click(function(){ alert('Evento click sobre un input text con id="nombre2"'); }); //$(".nombre3").click(function(){ $("input[class=nombre3]").click(function(){ alert('Evento click sobre un button con class="nombre3"'); }); });
Os explico el código superior:
$("#nombre2").click(function(){
$(".nombre3").click(function(){
El código HTML de los 3 formularios es el siguiente:
Formulario 1 <form name="ejemplo1" action="18-jquery-click-demo1.php" method="POST"> Click por name <input type="text" name="nombre1" size="40" value=""> </form> Formulario 2 <form name="ejemplo2" action="18-jquery-click-demo1.php" method="POST"> Click por id: <input type="text" name="nombre2" id="nombre2" size="40" value=""> </form> Formulario 3 <form name="ejemplo3" action="18-jquery-click-demo1.php" method="POST"> Click por class: <input type="button" name="nombre3" class="nombre3" value="Click por class"> </form>
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:
$(document).ready(function() { $("input[name=edad]").click(function () { alert("Bien!!!, la edad seleccionada es: " + $('input:radio[name=edad]:checked').val()); //alert("Bien!!!, la edad seleccionada es: " + $(this).val()); }); });
Explicación del ejemplo:
alert("Bien!!!, la edad seleccionada es: " + $(this).val());
El código HTML de los radio buttons es el siguiente:
<form name="formulario" id="formulario" action="18-jquery-click-demo2.php" method="POST"> <input type="radio" name="edad" id="edad1" value="20"> 20 años <input type="radio" name="edad" id="edad2" value="30"> 30 años <input type="radio" name="edad" id="edad3" value="40"> 40 años </form>
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:
$(document).ready(function(){ $("img[name=imagen]").click(function () { //$("img").click(function () { //$("#idimagen").click(function () { //$("img[class=claseimagen]").click(function () { //$(".claseimagen").click(function () { alert("has hecho click en la imagen"); }); });
Os explico este primer código:
Detección del click en un párrafo:
$(document).ready(function(){ $("p[id=idparrafo]").click(function () { //$("#idparrafo").click(function () { //$("p[class=claseparrafo]").click(function () { //$(".claseparrafo").click(function () { alert("has hecho click en el párrafo"); }); });
Explicación:
Detección del click en div:
$(document).ready(function(){ $("div[id=idcapa]").click(function () { //$("#idcapa").click(function () { //$("div[class=clasecapa]").click(function () { //$(".clasecapa").click(function () { alert("has hecho click en la capa div"); }); });
Os explico el tercer código de ejemplo:
Os voy a poner un ejemplo para que veáis cómo sería la detección del click con la función on():
$( "#mielemento" ).on( "click", function() { // lo que queramos realizar });
Y así sería la detección del click sobre el elemento con id = ‘mielemento’.
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: