Last Updated on August 19, 2022 by Roshan Parihar
In this tutorial, learn how jQuery button onclick call function. The short answer is to use the click() of jQuery to click the button on click event of the button.
You can also use the onclick attribute to call a function when someone clicks on the button. There can be many other methods to perform this task that is given here.
Let’s find out different methods of jQuery button onclick with the examples given below.
Method 1: Using click() Function to Call Function onclick in jQuery
To call a function on button click, you can use the click() of jQuery to trigger click when someone clicks on the button. Inside the function, you have to specify the created function to call it on click. See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function() { function myFn(){ alert('An alert message on button click with click().'); } $('button').click(function(){ myFn(); }); }); </script> <button type="button">Click me</button> |
Output
The above example contains only the button element to call a function on click. You have to click the button given above to call the function. After you click the button, you will get an alert box of the declared function. This shows that the created function is executed on a button click.
Method 2: Using onclick Attribute For jQuery Button OnClick Call Function
If you want to call a function on a button click, you can use the HTML onclick attribute. You have to first define the function with your code to execute on a button click. After that, specify the function inside the onclick attribute as given below.
|
1 2 3 4 5 6 |
<script> function myFn(){ alert('An alert message using onclick attribute.'); } </script> <button type="button" onclick="myFn()">Click me</button> |
Output
When you click the button given above, you will get an alert box showing that the function gets executed on a button click. This is a simple example without the need for jQuery to call the function. You only have to define the function using jQuery.
Method 3: Using on('click') Function
In addition to the above examples, you can also use the on('click') function that works the same as the click() function. You have to specify the created function inside the on('click') function as given below.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function() { function myFn(){ alert("An alert message on button click using on('click')."); } $('button').on('click', function(){ myFn(); }); }); </script> <button type="button">Click me</button> |
Output
You can click the above button to get an alert box of the created function. It works the same as the previous two examples. Only the difference is the way of writing the click event function in jQuery.
You May Also Like to Read