.trigger()

Syntax and Description

.trigger(eventType[, extraParameters])

eventType is a string containing a JavaScript event type such as click or submit
extraParameters is an array of additional parameters to pass along to the event handler

return value is the jQuery object, for chaining purposes.

trigger method executes all handlers and behaviors attached to the matched elements for the given event type.

Any event handlers attached with .bind() or one of its shortcut methods can be fired manually with the .trigger() method.


$('#foo').bind('click', function() {
    alert($(this).text());
});

The event handler above can be fired by the following code.


$('#foo').trigger('click');

When we define a custom event type using the .bind() method, the second argument to .trigger() can be use to passed information.


$('#foo').bind('custom', function(event, param1, param2) {
    alert(param1 + "\n" + param2);
});

The code event handler above can be triggered by the following code.


$('#foo').trigger('custom', ['Custom', 'Event']);

Trigger focus event

The following code triggers focus events.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!-- w  w w.j  a  v  a  2 s  .c  om-->
            $("#old").click(function(){
              $("input").trigger("focus");
            });
            $("#new").click(function(){
              $("input").triggerHandler("focus");
            });
            $("input").focus(function(){
              $("<span>Focused!</span>").appendTo("body");
            });
        });
    </script>
  </head>
  <body>
    <body>
          <button id="old">.trigger("focus")</button>
          <button id="new">.triggerHandler("focus")</button><br/><br/>
          <input type="text" value="To Be Focused"/>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.trigger()

Trigger mouse over event

The following code trigger mouse over event.


<html> 
    <head> 
        <style type="text/css"> 
        div { <!--  w  ww .j  a v  a  2s  .  co m-->
        padding : 10 10 10 10; 
        width : 100; 
        height : 100; 
        } 
        .div1 { 
        background-color : blue; 
        } 
        .div2 { 
        background-color : yellow; 
        } 
        .div3 { 
        background-color : green; 
        } 
        </style> 
        <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script> 
        <script> 
            $(document).ready(function(){ 
                $("p").hide();
                $(".div1", this).mouseover(function(){ 
                    $(this).find("p").fadeIn().fadeOut(); 
                });
                $(".div2", this).mouseover(function(){ 
                    $(this).find("p").fadeIn().fadeOut(); 
                });
                $(".div3", this).mouseover(function(){ 
                    $(this).find("p").fadeIn().fadeOut(); 
                });
                $("input").click(function(){ 
                    $("div").trigger("mouseover"); 
                }); 
            });
        </script> 
    </head> 
    <body>
        <div class="div1">
            <p>java 2 s.com</p> 
        </div> 
        <div class="div2">
            <p>ja va2s.com</p> 
        </div> 
        <div class="div3">
            <p>java2s.com</p> 
        </div> 
        <input type="button" value="run with trigger"></input>
    </body> 
</html>

Click to view the demo

The code above generates the following result.

.trigger()

Trigger click event

The following code triggers the click event.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w w  w  . java 2 s  .  c o m-->
               $("h1").click(function () {
                  alert("h1");
               });
               $("button:last").click(function () {
                    $("h1").trigger('click');
                    
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>java 2s.com</h1></div>
       <button value="java2s.com">java2s.com</button>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.trigger()

Trigger the change event

The following code trigger the change event with chained method.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w ww  .j  a  va2 s  .c o m-->
            $("select").change(function () {
               var str = "";
               $("select option:selected").each(function () {
                  str += $(this).text() + " ";
              });
              $("div").text(str);
            }).trigger('change');
        });
    </script>
  </head>
  <body>
    <select name="A" multiple="multiple">
        <option>A</option>
        <option selected="selected">B</option>
        <option>C</option>
    </select>
    <div></div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

.trigger()

Trigger a custom event

The following code binds a custom event and then trigger the custom event during a button click event handler.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   ww w  .  j  a  va2s  .c  o m-->
                $("div").bind("myCustomEvent", function(e, myName, myValue){
                  $(this).text(myName + ", hi there!");
                });
                $("button").click(function () {
                  $("div").trigger("myCustomEvent", [ "java2s.com" ]);
                });
        });
    </script>
  </head>
  <body>
    <body>
          <div>java2s.com</div>
          <button>bn</button>
    </body>
</html>

Click to view the demo

The code above generates the following result.

.trigger()