La tarea es llamar a una función cuando se cambia el contenido de un div. Puede lograr esta tarea utilizando el método incorporado conocido como .change() . En palabras simples, cada vez que se cambia el campo, llamamos a una función que arrojará una ventana emergente.
.change(): este método solo se activará cuando se produzca algún cambio en el elemento o campo. Acepta una función opcional como argumento que realizará algún tipo de trabajo.
Sintaxis:
$(selector).change(function())
selector: Seleccionará un elemento sobre el que tenemos que realizar esta tarea.
function(): Es un argumento opcional que especificará la función a ejecutar cuando ocurra el evento de cambio para los elementos seleccionados.
Enfoque 1: en este enfoque, vamos a implementar su ejecución sin tomar ningún parámetro como la función.
- Primero, cree un cuadro de entrada con algún valor y el atributo onChange .
- Cree un botón y asígnelo al script donde ha escrito el método de cambio sin ningún argumento.
Explicación: cuando hace clic en un botón, se produce un evento de cambio de activación del campo de entrada y aparecerá una ventana emergente que mostrará lo que esté presente en el campo de entrada.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input").change();
});
});
</script>
</head>
<body>
<p>
<h1>
Press enter to see the pop-up.
which says whatever written in the
input field
</h1>
</p>
<p>Enter anything you wish to:
<input value="GeeksForGeeks"
onchange="alert(this.value)"
type="text"></p>
<button>
Trigger change event for input field
</button>
</body>
</html>
Producción:
Antes de hacer clic:
Después de hacer clic:
Enfoque 2: en este enfoque, vamos a implementar su ejecución con la ayuda de la función como argumento en el método de cambio.
- Haz un campo de entrada de tipo texto.
- Asigne el elemento de entrada al método change() y escriba un texto para mostrar en la llamada de función.
Explicación: cuando ingresa algo en el campo de entrada y presiona enter, el evento de cambio se ejecutará y ejecutará la función y mostrará el mensaje que está escrito en la función.
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").change(function(){
alert("Welcome geek you have changed something.");
});
});
</script>
</head>
<body>
<input type="text">
<p><h1>
Enter something and press enter to see the effect.
<h1></p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA