El método trigger() es un método en jQuery que se utiliza para activar un controlador de eventos específico en el elemento seleccionado.
Sintaxis:
$(selector).trigger(event, param1, param2)
Nota: Se pueden pasar parámetros adicionales en el método trigger().
Ejemplo 1: este método activó dos métodos para aumentar el valor del método.
<!DOCTYPE html>
<html>
<head>
<title>
jQuery trigger() Method
</title>
</head>
<body>
<div class="box-1">
<h1>0</h1>
</div>
<button id="btn1">Increase #1</button>
<div class="box-2">
<h1>0</h1>
</div>
<button id="btn2">Increase #2</button>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to use trigger() method -->
<script>
$(document).ready(function() {
$("#btn1").click(function() {
Increase($(".box-1>h1"))
})
$("#btn2").click(function() {
$("#btn1").trigger("click");
Increase($(".box-2>h1"))
})
function Increase(obj) {
var text = parseInt(obj.text(), 10);
obj.text(text + 1);
}
});
</script>
</html>
Salida:
en el ejemplo anterior, utiliza una función de aumento (obj) que toma un elemento html como un objeto y aumenta el valor del texto numérico dentro de él en uno mediante el uso de la función parseInt() para convertir una string en un número entero.
function Increase(obj) {
var text = parseInt(obj.text(), 10);
obj.text(text + 1);
}
Además, el selector jQuery se usa para seleccionar botones y adjuntar un método de evento de clic y dentro de él llamamos a la función Aumentar (obj) .
$("#btn1").click(function(){
Increase($(".box-1>h1"))
})
$("#btn2").click(function(){
$("#btn1").trigger("click");
Increase($(".box-2>h1"))
})
Cuando haga clic en el botón Aumentar #1 , aumentará el valor dentro de los div correspondientes en 1. Pero cuando haga clic en el botón Aumentar #2 , aumentará los valores en ambos div en uno. Porque estamos disparando ‘clic’ con la ayuda del evento del método trigger() dentro del método de clic de enlace de #btn2 .
Ejemplo 2: este ejemplo activa el evento de enfoque del elemento de entrada con la ayuda del método trigger() .
<!DOCTYPE html>
<html>
<head>
<title>
jQuery trigger() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid green;
text-align: center;
}
</style>
</head>
<body>
<div>
<input id="name" type="text"
placeholder="Input text..."/>
<br/>
<p>
click anywhere inside div to
focus input element.
</p>
</div>
<!-- Script to use trigger() method -->
<script>
$(document).ready(function() {
$("div").click(function() {
$("#name").trigger("focus");
})
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Pankaj_Singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA