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