jQuery Click() Event Method Example

jQuery Click() Event Method Example

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>               

Recommended jQuery Tutorial

  1. How to Get & Set Data Attribute Value From Elements jQuery
  2. jQuery Remove Attribute and Disabled Attribute From Element
  3. jQuery | Event MouseUp By Example
  4. Event jQuery Mouseleave By Example
  5. jQuery Event Mouseenter Example
  6. Event jQuery MouseOver & MouseOut By Example
  7. keyup jquery event example
  8. Event jQuery. Blur By Example
  9. jQuery form submit event with example
  10. keydown function jQuery
  11. List of jQuery Events Handling Methods with examples
  12. Jquery Selector by .class | name | #id | Elements
  13. How to Get the Current Page URL in jQuery
  14. jQuery Ajax Get() Method Example
  15. get radio button checked value jquery by id, name, class
  16. jQuery Get Data Text, Id, Attribute Value By Example
  17. Set data attribute value jquery
  18. select multiple class in jquery
  19. How to Remove Attribute Of Html Elements In jQuery

Leave a Reply

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