jQuery Click() Event Example

by

jQuery click event example; Through this tutorial, i am going to show you how to use click() event method in jQuery with HTML.

jQuery Click() Event Example

jQuery click event occurs when you click on an html element. jQuery click() method is used to trigger the click event. For example $(“p”). click() will trigger the click event when a paragraph is clicked on a document (a web page).

Syntax

$(selector).click()

It is used to trigger click events for the selected elements.

$(selector).click(function)

Let’s see an example of click () event:

<!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>
Recommended:-How to Get Element by class, name, id in jQuery

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>

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>

Conclusion

jQuery click event example tutorial; you have learned how to use jQuery click event with html elements.

Leave a Comment