Hey!!! que tal amigos, el día de hoy hablaremos sobre el evento change() en jQuery, este evento puede ser de gran ayuda en varias tareas que querramos realizar dentro de nuestra página web. Para ejemplo vamos a realizar un pequeño ejercicio en donde ingresemos nuestro nombre y nuestra edad y automáticamente nos muestre un Texto compuesto por estos elementos que acabo de mencionar.

Pero bueno, sin mas vueltas vamos al código; la sintaxis básica del evento es la siguiente:

$("#elemento").change(function(){
 // Tu código va aquí
});

Para empezar declaramos nuestra página básica de html.

<!DOCTYPE html>
<html>
<head>
 <title>change() event</title>
 <script src="js/jquery.min.js"></script>
</head>
<body>
  Ingresa tu nombre <input type="Text" id="nombre"/>
  Ingresa tu Edad <input type="Number" id="edad"/>
  <div id="ResultadoNombre"></div>
  <div id="ResultadoEdad"></div>
  <script type="text/javascript">
   // Tu codigo jQuery irá aquí
  </script>
</body>
</html>

Muy bien, ahora lo siguiente es declarar nuestros eventos de jquery:

$("#nombre").change(function(){
  // código
});
$("#edad").change(function(){
  // código
});

En el código anterior podemos observar que a nuestros elementos con id nombre y edad le añadimos el evento change() y dentro de este evento pasamos como parámetro una función con las instrucciones que deseamos ejecutar: change(function(){//código aquí}). Ahora procedemos a definir las acciones que se realizarán en cuanto el evento se dispare; como mencionamos vamos a crear un texto; primero con el nombre ingresado y lo agregamos:

$("#nombre").change(function(){
 var nombre = "";
 // Verificamos que el campo de nombre  no esté vacío
 if($("#nombre").val() != ""){
  nombre =  $("#nombre").val();
  // Asignamos el valor de nombre al div de resultado
  $("#ResultadoNombre").html("<h3>Mi nombre es "+nombre+" </h3>");
 }else{
  $("#ResultadoNombre").html("");
 }
});

De la misma forma hacemos para el campo de edad:

$("#edad").change(function(){
 var edad = 0 ;
 // Verificamos que el campo de nombre  no esté vacío
 if($("#edad").val() != ""){
  edad =  $("#edad").val();
  // Asignamos el valor de edad al div de resultado
  $("#ResultadoEdad").html("<h3>Mi edad es "+edad+" </h3>");
 }else{
  $("#ResultadoEdad").html("");
 }
});

Lo anterior lo integramos a nuestro código declarado al principio de este post, para tenerlo funcionando en un solo archivo.

Por último si deseamos ejecutar el evento change de forma programática en cualquier momento lo podemos hacer utilizando únicamente la sintaxis $("#elemento").change();. Y esto disparará el evento sobre el elemento seleccionado igual que si hubiésemos modificado el elemento de forma manual. Esperando que este post sea de ayuda para ti, te mando un cordial saludo.