jQuery | click() with Examples
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.
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-
