jQuery trigger() Method

jQuery | trigger() Method: Learn about the jQuery trigger() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 01, 2022

trigger() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the trigger() method here.

The trigger() method is a built-in jQuery method. The trigger() method, when executed, triggers the event handler for the element selected and also triggers the default behavior of the event. For example: if the event is 'select', then the trigger() method will execute the function for this event, also it will select the element (here input text).

trigger() Method Syntax

$('selector').trigger(event, parameter_1, parameter_2, ...);

It takes the following parameters:

The event, required, has to be specified for triggering it for the element.
parameters are optional and can be passed to an event handler.

The following example explains the implementation of the trigger() method precisely. When the trigger button is clicked, it calls the select() method which further executes the replaceWith() method attached to it.

jQuery trigger() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event - Trigger</h2>
    <p>Click the button to trigger the event handler after writting something in the input box.</p>
    <button>Trigger</button>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help !</h4>
    <p>This is a jQuery Tutorial for Event Methods.</p>
    <h4 style="color:darkblue">Thanks for visiting !</h4>
    Name: <input type="text">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('input').select(function(){
            $(this).replaceWith('Value Inserted');
        });
    
        $('button').click(function(){
            $('input').trigger('select');
        });
    });
  </script>
</html>

Output:

jQuery undelegate() Method

jQuery triggerHandler() Method

Comments and Discussions!

Load comments ↻