Updated April 1, 2023
Introduction to JQuery Trigger()
The event handlers are triggered when they are used with the .on() method or similar type of methods and other shortcut methods like for example, .onclick(), .onmouseover(), among others. The even handlers get triggered by default when using with them with .on() method when their respective event occurs. However, these event handlers can also be triggered manually. This can be done with the help of the .trigger() method. When the even handlers are made to trigger manually using the .trigger() method, the event handlers get executed in a very similar manner, if these event handlers were to be triggered using the .on() method.
The .trigger () method is a function available in jQuery which allows us to trigger another specific event or event handler when an element is selected. The event triggered is not bound to browser based only. Our .trigger method triggers an event that is specifically mentioned and also the behavior, by default, of the event (like submitting a form ) for the element that is selected. The .trigger method is almost similar to .triggerHandler() method, but the .triggerHandler () Method do not trigger an element’s default nature or behavior.
Syntax:
$(selector).trigger( event, [data] )Or
$(selectedElement).trigger(SpecifiedEvent, Parameter 1, Parameter 2…)Parameters:
- Event [or SpecifiedEvent]: It is a required parameter for the method. Specifies the event type or object to be triggered. It can be any of the custom events or maybe out of the standard events.
- data [or Parameters 1 and 2]: These are the optional parameters that are passed as arguments to our event handler.
Examples of JQuery Trigger()
Following are the examples of jquery trigger() method:
Example #1
Let’s see an example. Following is a simple example showing the use of the .trigger method. In the following example, we will trigger the “Click” event for block “TWO” when we click on block “ONE”
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> JQuery Trigger Method Demo </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > </script>
<style>
div {
padding: 10px;
margin: 10px;
width: 60px;
border: 1px solid #000;
border-width: 2px;
}
</style>
</head>
<body>
<span style="font-weight:bold"> Click any of the squares to see the trigger demo effect: </span>
<br>
<div id = "Div_One" style = "background-color:#0CC; text-align:center"> <b> ONE </b> </div>
<div id = "Div_Two" style = "background-color:#0CC; text-align:center"> <b> TWO </b> </div>
<!-- Below is the script used to trigger, trigger () method -->
<script type = "text/javascript" language = "javascript" >
$(document).ready(function() {
$("#Div_One").click( function () {
$("#Div_Two").trigger('click') ;
});
$("#Div_Two").click( function () {
alert ( "You have clicked Box 'TWO' " ) ;
});
});
</script>
</body>
</html>Output:
When the user clicks on block “ONE”, an alert is displayed:
When the user clicks on block “TWO”, an alert is displayed:
Note that both the alerts are the SAME. This happened because of the following reasons:
- When a user clicks on the block “ONE”, with its id, “Div_One”, it triggers a “Click” method for id, “Div_Two”. When click event occurs for Div_One, it triggers the “Click” event of “Div_Two” which in turn displays the above-displayed alert.
- When the user clicks on the block “TWO”, the user clicks on id, “Div_Two”, which as mentioned above displays an alert on click event.
Example #2
Let’s see another example below.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> JQuery Trigger Method Demo </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<style>
/* For styling */
* {
box-sizing: border-box;
}
input[type=text] {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
border-radius: 3px;
}
label {
display: inline-block;
padding: 12px 10px 12px 2px;
}
.container {
background-color: #99C;
border-radius: 3px;
padding: 8px;
}
body {
font-family: "Open Sans";
font-size: 20px;
}
form {
padding: 20px;
background:#300;
color: #ff9;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
border-radius: 4px;
}
/* Set the styling for the Trigger button */
.registerbtn {
background-color:#9C6;
color:#030;
border: none;
padding: 15px 0px;
margin: 19px 0px;
cursor: pointer;
border-radius: 5px;
float: left;
}
@media screen and (max-width: 600px) {
.row {
width: 100%;
margin-top: 0;
}
}
.registerbtn:hover {
opacity: 4;
}
form .error {
color: #ff0009;
}
</style>
</head>
<body>
<div class="container">
<form class="form" id="MyForm" name="MyForm">
<fieldset>
<legend> Form </legend>
<p> *** Click Confirm button to see the trigger effect *** </p>
<div class="row">
<label for="FName"> Enter your First Name </label>
<input id="name" name = "FName" type = "text" value = "">
</div>
<div class="row">
<input class="registerbtn" id="check" value="Trigger" style="text-align:center; font-weight:bold">
<br>
</div>
</fieldset>
</form>
</div>
<!-- Script for triggering function “Focus” when user clicks “Trigger” button -->
<script>
$(document).ready(function() {
$("#check").click(function() {
$("#name").trigger("click");
});
$("#name").click(function(){
$("#name").after("The field is empty");
});
});
</script>
</body>
</html>Output:
When a user clicks ‘Trigger’ button, we get the following text:
Note the following points:
When the user clicks on the button, jQuery calls the “.trigger ()” function under the “Click” method.
$("#check").click(function() {
$("#name").trigger("click");
});which in return displays our text by triggering the “Click” method for id, “#name”.
$("#name").click(function(){
$("#name").after("The field is empty");
});This text will also be displayed if the user clicks inside the “input” field since we have the original “Click” method for id, “#name” which displays the text.
Thus, both the event, “Clicking inside the input text field” and “Clicking on the button, which in turn triggers the method for clicking inside the text field”.
Since jQuery 1.3, the events triggered using the .trigger() method gets bubbled up in the DOM tree and produces multiple instances of the triggered event which can be avoided by using an event handler, or call .stopPropagation() method.
Recommended Articles
This is a guide to JQuery Trigger(). Here we discuss the introduction and syntax along with different examples and its code implementation. You may also look at the following articles to learn more –
