.click()

Syntax


.click(handler)          
.click()

handler: A function to execute each time the event is triggered.

Return value

The jQuery object, for chaining purposes.

Description

Bind an event handler to the click JavaScript event, or trigger that event on an element.

.click(handler) is a shortcut for .bind('click', handler). .click() is a shortcut for .trigger('click').

We can also trigger the event when a different element is clicked.


$('#other').click(function() {
 $('#target').click();
});

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#container").click(function (e) {
              alert(e.target.tagName);
              e.preventDefault();
              return false;
            });
        });
    </script>
  </head>
  <body>
    <body>
    <div id="container">
        <div>
          <p>This <span>is the <em>way</em> we</span> 
          write <em>the</em> demo,</p>
        </div>
    </div>
  </body>
</html>

Click to view the demo

Anchor click 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(){
       $("a").click(function(event){
         alert("Thanks for visiting!");
       });
     });
    </script>
  </head>
  <body>
    <a href="http://java2s.com/">java2s.com</a>
  </body>
</html>

Click to view the demo

Add your own action to anchor

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
   $(document).ready(function(){
     $(".article .thebody").hide();
     $("#container .article ul").prepend("<li class='my'><a href='' title='title'>link</a></li>");

     $(".actions li.my a").click(function(event){
       $(this).parents("ul").prev(".thebody").toggle();
       
       event.preventDefault();
     });
   });
    </script>
  </head>
  <body>
 <div id="container">
   <div class="article">
     <p class="summary">Summary 01</p>
     <p class="thebody">Lorem ipsum....</p>
     
     <ul class="actions">

     </ul> 
     
   </div>

 </div>


  </body>
</html>

Click to view the demo

Add click listener to links in unordered list

 
<html>
  <head>
    <script  src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>

    <script type='text/javascript'>
        var tmpExample = {
          ready : function() {
            $('ul#myStyle li a').click(
              function($e) {
                $e.preventDefault();
                window.open(this.href, 'FavoriteLink', '');
              }
            );
          }
        };
        
        $(document).ready(tmpExample.ready);

    </script>
    <style type='text/css'>
        ul {
            list-stlye: none;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
    </style>
  </head>
  <body>
    <ul id='myStyle'>
        <li><a href='http://www.java2s.com'>java2s</a></li>
        <li><a href='http://www.apple.com'>Apple</a></li>
        <li><a href='http://www.jquery.com'>jQuery</a></li>
    </ul>
  </body>
</html>

Click to view the demo

Stop click event

 
<html>
  <head>
    <script  src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>

    <script type='text/javascript'>
        var tmpExample = {
          ready : function() {
            $('ul#myStyle li a').click(
              function($e) {
                $e.preventDefault();
                window.open(this.href, 'FavoriteLink', '');
              }
            );
          }
        };
        
        $(document).ready(tmpExample.ready);
        
    </script>
    <style type='text/css'>
        ul {
            list-stlye: none;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
    </style>
  </head>
  <body>
    <ul id='myStyle'>
        <li><a href='http://www.java2s.com'>java2s</a></li>
        <li><a href='http://www.apple.com'>Apple</a></li>
        <li><a href='http://www.jquery.com'>jQuery</a></li>
    </ul>
  </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: