jQuery trigger() method

The trigger() method is used to trigger the specified event handler for every matched element. This method can also be used to trigger the default behavior for the selected elements.

Syntax

The commonly used syntax of using the trigger() method is given as follows.

This method has one mandatory parameter and can have multiple optional parameters.

Parameter Values

event: It is the mandatory parameter. It specifies an event to trigger a particular element. It can be a standard event or a custom event.

param1,param2,...: These are optional and additional parameters to be passed as arguments to the event handler. They are useful with custom events.

Let's see some illustrations of using the trigger() method.

Example1

In this example, a select event of input element will be fired using the trigger() method on clicking the given paragraph element. When the select event is fired, it will change the style of the input field and body of the document.

Here, we are using the mandatory event parameter of the trigger() method.

<!DOCTYPE html>
<html>
<head>
<title> jQuery trigger() method </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p2 {
border: 2px solid red;
width: 60px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $("#tf").trigger("select");
  });
    $("#tf").select(function(){
    $("#tf").css({"backgroundColor": "yellow", "fontSize": "25px"});
    $("body").css({"backgroundColor": "lightgreen", "fontSize": "25px"});
  });
});
</script>
</head>
<body>
<h4> This is an example of using the jQuery trigger() method </h4>
<input id = "tf" type = "text" value = "Text here...">
<br>
<p id = "p1"> Click the following text to see the effect. </p>
<p id = "p2"> Click me </p>

</body>
</html>

Test it Now

Output:

After the execution of the above code, the output will be -

After clicking the given paragraph element, the output will be -

Example2

In this example, we are using the optional parameters of the trigger() method. These additional parameters passed as the arguments to the event handlers.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p2 {
border: 2px solid red;
width: 60px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$("#p2").click(function () {
 $("#p2").bind("custom", function(event, id, name, salary){
      alert("Employee ID = " + id + "\nName = " + name + "\nSalary = " + salary);
    });
    
      $("#p2").trigger("custom", ["E01", "John", "30,000"]);
    });
});
</script>
</head>
<body>
<h4> This is an example of using the jQuery trigger() method </h4>

<p id = "p1"> Click the following text to see the effect. </p>
<p id = "p2"> Click me </p>
</body>
</html>

Test it Now

Output:

After the execution of the above code, the output will be -