.click()

Syntax and Description


.click(handler)          
.click()

handler is a function to execute each time the event is triggered. Return value is the jQuery object, for chaining purposes.

jQuery clear event binds 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 trigger the event when a different element is clicked.


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

The following code listens to a click event and displays the tag name and then stops it.


<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 .  j  a va 2 s .co m-->
           $("#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>
        <p>java2s.com</p>
    </div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

anchor click event


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<!-- w w  w .  j  a  va2 s  .c om-->
    <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

The code above generates the following result.

Add click listener to links in unordered list

The following code adds click listener to links in unordered list.


<html>
  <head>
    <script  src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<!--   w  w w.  java2 s.  c  o  m-->
    <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

The code above generates the following result.