jQuery click() Method
Last Updated :
11 Jan, 2024
Improve
jQuery click() is an inbuilt method that starts the click event or attaches a function to run when a click event occurs.
Syntax:
$(selector).click(function);Parameters:
It accepts an optional parameter "function" which is used to run when a click event occurs.
jQuery examples to show the working of click() method:
Example 1: In the below code, no function is passed to this method.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</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:
Example 2: In the below code, the function is passed to this method.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</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:
