Jquery Click() Event Method with E.g.

Jquery Click() Event Method with E.g.

jQuery click()

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

$(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>  

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>               

Leave a Reply

Your email address will not be published. Required fields are marked *