What is the click event in JQuery? and how to use the click event in JQuery.

1 votes
62 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

What is the click event in JQuery? and how to use the click event in JQuery.

1 Answer

1 votes
Ravi Vishwakarma answered 03-Aug-2021 by Ravi Vishwakarma

When we click on an element on the web page with the mouse, then the click event is activated. This click event is accessed from predefined click() method. This click() method is written in jquery library. Executes a function when the click() method is activated.

Syntax
$(selector).click(function() {
    //statement 
});
Example
<!doctype html>
<html lang='en'>
  <head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <!-- Bootstrap CSS -->
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous'>
<title>Click Event demo</title>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                alert('This is a alert box, this box is occur from click event');
            });
        });
    </script>
</head>
<body>
    <div class='container'>
        <button class='btn btn-primary my-1' >Click me then show the alert box</button>
    </div>
    <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
  </body>
</html>

Output:

What is the click event in JQuery? and how to use the click event in JQuery.