Post
Ask Question

Trigger in JQuery

Introduction

The JQuery trigger Method is Used to Trigger a specified event of another control. In simple word this method is used to execute the code of other control from one control.

The main characteristics of this method is-

  1. Trigger() will affect every element in jquery in the Jquery object.
  2. Trigger() event will bubble up the DOM tree.
  3. Trigger() allow the default beheviour of event to occur.
  4. The Syntax for the Trigger is:

trigger

So here, I am explaining a example which clearly demonstrate how we can use the trigger in Real Time Project.

Here I have 2 button in my UI.

button in my UI

The Html Code for this button is:

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <asp:Button runat="server" ID="btn_Click" Text="Click" />  
  4.         <br />  
  5.         <br />  
  6.         <asp:Button runat="server" ID="btn_say" Text="Say Hello" />  
  7.     </form>  
  8. </body>  
Now writing following JavaScript For "BUTTON SAY " Click.
  1. <head runat="server">  
  2.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  3.     <script>  
  4.       $(document).ready(function () {  
  5.          $("#btn_say").click(function () {  
  6.             alert("Hello World");  
  7.          });  
  8.       });  
  9.    </script>  
  10. </head>  
As per the code it works fine when we click the "Say Hello" button.

Say Hello

Now execute the same code in the "Click" button click .So for triggering the "sayHello" button logic in "Click" button click we need trigger here.

So my Java script will be like this.
  1. <script>  
  2.    $(document).ready(function () {  
  3.       $("#btn_Click").click(function () {  
  4.          $("#btn_say").trigger("click");  
  5.       });  
  6.    });  
  7. </script>  
So here in clicking "Click" button the "Sayhello" button code will execute and give the OutPut.

click

click hello

It Works as follow-

workflow

So In this way we can use use the Trigger() function of JQuery.