Evento Change JQuery

jquery

jquery

Siguiendo el aprendizaje de JQuery en este artículo veremos como desencadenar una acción haciendo uso del evento change, que nos permitirá establecer en que momento se han realizado cambios en un componente, cabe resaltar que este evento está disponible para los componentes de entrada de texto como lo son: input, textArea y select, con la leve diferencia que en este último se desencadena el evento al seleccionar un nuevo ítem, mientras que en el primero y segundo cuando se realiza un cambio y se pierde el foco, veamos:

Al igual que muchos de los comandos de JQuery accedemos a este evento teniendo en cuenta la sintaxis:

1
$(selector).change()

Así mismo podemos asignar una función anónima que se ejecuta en el método de cambio:

1
$(selector).change(function)

Ejemplos practicos:

1
2
3
4
5
6
7
<input class="input" type="text" id="nombres"/>

<script type="text/javascript">
$("#nombres").change(function(){
alert("Has ingresado un nuevo valor: "+$('#nombres').val());
});
</script>

Nota: Como podemos ver cuando cambiamos el valor de la caja de texto se ejecuta el alert informandonos el nuevo cambio cuando la caja de texto pierde el foco, pero si no se realiza ningún cambio y pierde el foco este no se ejecuta.

A continuación un ejemplo con una lista desplegable o select:

1
2
3
4
5
6
7
8
9
10
11
12
<select name="" id="n">
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Hotmail">Hotmail</option>
<option value="Facebook">Facebook</option>
</select>

<script type="text/javascript">
$("#n").change(function(){
alert("Has cambiado de ítem: "+$('#n').val());
});
</script>

Nota: Si nos damos cuenta nuestro mensaje se verá siempre y cuando se realice un cambio de ítem.

Muy bien amigos este es el uso del evento change en JQuery, seguiremos desarrollando y comprendiendo el uso de esta librería tan indispensable para el desarrollo Web.

Hasta pronto!.

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

Deja un comentario

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