.trigger()

Syntax

.trigger(eventType[, extraParameters])

Parameters

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

Return value

The jQuery object, for chaining purposes.

Description

Execute 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());
});


$('#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);
});

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

Trigger focus event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#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

trigger() method accepts two arguments: a string denoting the event type to trigger.

 
<html> 
    <head> 
        <style type="text/css"> 
        div { 
        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/Book/JavaScriptDemo/jQuery/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>Here</p> 
        </div> 
        <div class="div2">
            <p>Here</p> 
        </div> 
        <div class="div3">
            <p>Here</p> 
        </div> 
        <input type="button" value="run with trigger"></input>
    </body> 
</html>

Click to view the demo

Trigger Another Event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("h1").click(function () {
                  alert("h1");
               });
               $("button:last").click(function () {
                    $("h1").trigger('click');
                    
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
       <button value="asdf">asdf</button>
    </body>
</html>

Click to view the demo

Triggered By Select Change Event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("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

Trigger handler

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("h1").click(function () {
                  alert("h1");
               });
               $("button:last").click(function () {
                    $("h1").triggerHandler('click');
               });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
       <button value="asdf">asdf</button>
    </body>
</html>

Click to view the demo

Triggers the blur event of each matched element

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("input").blur(function () {
                $(this).next("span").css('color','red');
             });

        });
    </script>
  </head>
  <body>
    <body>
       <p><input type="text" /> <span>blur fire</span></p>
       <p><input type="password" /> <span>blur fire</span></p>

    </body>
</html>

Click to view the demo

Trigger Submit Event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("form").submit(function() {
                alert("submit");
                  return false;
            });
            $("form:first").submit();
        });
    </script>
  </head>
  <body>
    <body>
    <form action="javascript:alert('success!');">
        <div>
          <input type="text" />
          <input type="submit" />
        </div>
     </form>
     <div></div>
    </body>
</html>

Click to view the demo

Trigger a custom event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("div").bind("myCustomEvent", function(e, myName, myValue){
                  $(this).text(myName + ", hi there!");
                });
                $("button").click(function () {
                  $("div").trigger("myCustomEvent", [ "asdf" ]);
                });
        });
    </script>
<style>

  div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }
  
</style>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <button>bn</button>
    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: