Skip to content
Related Articles

Related Articles

jQuery | click() with Examples
  • Last Updated : 12 Feb, 2019

The click() is an inbuilt method in jQuery that starts the click event or attach a function to run when a click event occurs.
Syntax:

$(selector).click(function);

Parameter: It accepts an optional parameter “function” which is used to run when a click event occurs.
Return Value: It returns the selected element with specified function to perform.

jQuery code to show the working of click() method:

Code #1:
In the below code, no function is passed to this method.




<html>
  
<head>
    <script 
    </script>
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function() {
            $("p").click();
        });
    </script>
    <style>
        p {
            display: block;
            width: 300px;
            padding: 20px;
            font-size: 30px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- click on this method -->
    <p onclick="alert('paragraph was clicked')">This is a paragraph.</p>
</body>
  
</html>

Output:
Both outputs get generated simultaneously-



Code #2:
In the below code, function is passed to this method.




<html>
  
<head>
    <script 
    </script>
    <script>
        <!-- jQuery code to show the working of this method -->
        $(document).ready(function() {
            $("p").click(function() {
                $(this).fadeOut();
            });
        });
    </script>
    <style>
        p {
            display: block;
            width: 370px;
            padding: 25px;
            font-size: 25px;
            border: 2px solid green;
        }
    </style>
</head>
  
<body>
    <!-- click on this paragraph and the paragraph will disappear -->
    <p>Click inside this block and whole block will disappear !!!</p>
</body>
  
</html>

Output:
Before clicking inside the block-

After clicking inside the block-

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :