jQuery | método trigger()

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

Deja una respuesta

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