jQuery Click() Event Method Example

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>

jQuery Click() Event Method Example