Define a Function and Trigger It Onclick Using jQuery

Parvez Alam
3 min readSep 23, 2023

This jQuery tutorial helps you define a function and invoke it when a button is clicked. We will explore various ways to define jQuery functions and demonstrate their usage through examples.

There are very common tasks in any web application Like defining functions that execute when a user interacts with a web page, such as clicking a button.

Prerequisites

Please Make sure you have jQuery integrated into your web project. You can do this by adding the jQuery library through a CDN (Content Delivery Network) or by downloading it and hosting it locally.

Create a Function and Trigger It onClick() of the Button

You can use either the onclick attribute or the jQuery click event with the click() function to invoke a function when a click event occurs. Create a directory named 'jquery-example' and within this directory, generate a fresh file named 'index.html'.

Import jQuery

Include jQuery in the head section of your file.

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- Your web page content here --> </body> </html>

Defining a Function with jQuery

Let’s create a setTitle() method into the index.html file.

<h1 id="title"></h1> <script> // Define a function function setTitle() { $('#title').text('js-tutorials.com!'); } </script>

in the above code have defined setTitle() function, it uses jQuery to select an HTML element with the ID 'title' and changes its text to "js-tutorials.com!" when called.

Call jQuery Method onclick of Button

We’ll call the above method inside the $(document).ready() function. This method helps to execute code only after the HTML document is fully loaded.

$(document).ready(function() { // Attach a click event handler to a button with the ID 'setName' $('#btnTitle').click(setTitle); }); <button id="btnTitle">Change Title</button>

In the above code, we have attached a click event with a button, which triggers the setTitle function.

Full code:

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1 id="title"></h1> <script> // Define a function function setTitle() { $('#title').text('js-tutorials.com!'); } $(document).ready(function() { // Attach a click event handler to a button with the ID 'setName' $('#btnTitle').click(setTitle); }); </script> <button id="btnTitle">Change Title</button> </body> </html>

Passing Parameters to a Click Event Function

Sometimes, we need to parameters to the function triggered by a click event.

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1 id="title"></h1> <script> // Define a function function setTitle(title) { $('#title').text(title); } $(document).ready(function() { $('#btnTitle').click(function() { setTitle('js-tutorials.com!'); }); }); </script> <button id="btnTitle">Change Title</button> </body> </html>

in the above code, we have defined the anonymous function inside the click() event handler, that will invoke the method when the user clicks the button, this will call the setTitle() method and change the text.

Conclusion

We have learned about jQuery method creation and method invoking on onclick event. Also, attached click event handlers and pass parameters to functions on the click of the method.

Originally published at https://www.js-tutorials.com on September 23, 2023.

--

--

Parvez Alam

Hey, I am Parvez Alam. A software developer since 2009. I love learning and sharing knowledge. https://www.phpflow.com/