JQuery trigger()用法及代码示例

trigger()方法是jQuery中的一种方法，用于触发所选元素上的指定事件处理程序。

用法:

$(selector).trigger(event, param1, param2)

注意：可以使用trigger()方法传递其他参数。

示例1:该方法触发了两种方法来增加方法的价值。

<!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>

输出：

在上面的示例中，使用了一个Growth(obj)函数，该函数将html元素作为对象，并使用parseInt()函数将字符串转换为整数，从而将其中的数字文本的值增加一。

function Increase(obj) {
        var text = parseInt(obj.text(), 10);
        obj.text(text + 1);
      }

此外，jQuery选择器用于选择按钮并为其添加附加的click事件方法，在其中我们调用了Growth(obj)函数。

        $("#btn1").click(function(){
            Increase($(".box-1>h1"))
        })

        $("#btn2").click(function(){
            $("#btn1").trigger("click");
            Increase($(".box-2>h1"))
        })

当点击增加＃1按钮时，它将使对应的div内的值增加1。但是，当点击增加＃2按钮时，它将两个div中的值增加一。因为我们是在＃btn2绑定单击方法内部的trigger()方法事件的帮助下触发“单击”的。

示例2:本示例借助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>

输出：

相关用法

注：本文由纯净天空筛选整理自Pankaj_Singh大神的英文原创作品 jQuery | trigger() Method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。