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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。