.click()

In this chapter you will learn:

Syntax and Description for .click() event
How to listen to anchor click event
How to add click listener to links in unordered list

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><!--  j av a  2s  .c o m-->
  <head>
    <script src="http://java2s.com/style/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>
        <p>java2s.com</p>
    </div>
  </body>
</html>

Click to view the demo

anchor click event

<html><!--   j ava2  s  .  c  o  m-->
  <head>
    <script src="http://java2s.com/style/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 click listener to links in unordered list

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

<html><!-- j  a v  a  2 s  . co m-->
  <head>
    <script  src="http://java2s.com/style/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

Next chapter...

What you will learn in the next chapter:

Syntax and Description for .error() event