jQuery click event method; In this tutorial, you will learn what is jQuery click method and how to use this method with html elements.
jQuery Click() Event Method
When you click on an element, the jquery click event occurs and once the click event occurs, it executes the click () method or attaches the function to run.
Syntax of jQuery Click() Event Method
$(selector).click()
It is used to trigger click events for the selected elements.
$(selector).click(function)
Example 1 – jQuery Click() Event Method
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the statement.</p>
</body>
</html>
Example 2 – jQuery Click() Event Method
Let’s see second example of jquery click () event. In this example, when you click on the title element, it will hide the current title.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("h1,h2,h3").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1>This heading will disappear if you click on this.</h1>
<h2>I will also disappear.</h2>
<h3>Me too.</h3>
</body>
</html>
Example 3 – jQuery Click() Event Method
Let’s see third example of jquery click (). In this example, we will create function and call this function on button click. In simple word when you click on the button element, it will call a function and show alert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Define a Function in jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function display() {
alert('You have successfully call the function!');
}
$(".call-btn").click(function(){
display();
});
});
</script>
</head>
<body>
<button type="button" class="call-btn">Click Me</button>
</body>
</html>
Recommended jQuery Tutorial
Recommended:-jQuery – Remove All Unwanted Whitespace From String
Recommended:-jQuery | Event MouseUp By Example
Recommended:-keyup jquery event example
Recommended:-Event jQuery. Blur By Example
Recommended:-jQuery form submit event with example
Recommended:-jQuery Ajax Form Submit with FormData Example
Recommended:-keydown function jQuery
Recommended:-List of jQuery Events Handling Methods with examples
Recommended:-Jquery Selector by .class | name | #id | Elements
Recommended:-Get the Current Page URL in jQuery
Recommended:-jQuery Ajax Get() Method Example
Recommended:-jQuery Get Data Text, Id, Attribute Value By Example
Recommended:-Set data attribute value jquery
Recommended:-select multiple class in jquery
Recommended:-How to Remove Attribute Of Html Elements In jQuery
Recommended:-jQuery Form Validation Custom Error Message
Recommended:-Get radio button value jquery by id, name, class
