Last Updated on April 27, 2022 by Roshan Parihar
In this tutorial, learn how jQuery call function in different events like after 5 seconds, on page load, on button click, and on checkbox change. The short answer is to use the jQuery click() to find the click event of the mouse.
To find out how you can call a user-defined function after some time delay, on the loading page, click a button, and checkbox change, you need to see the different examples given below. So, let’s see the live examples.
How jQuery Call Function After 5 Seconds
To call a jQuery function after some time (like 5 seconds), you have to use the jQuery delay() with its value in milliseconds (ms). For adding 5 seconds, you have to place the value as 5000 ms.
It is also required to use the queue() function to call the function at a certain time and dequeue() to go to the initial state of calling. If you do not use the dequeue() function, the jQuery call function will not work for the second time.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function() { function myFunction(){ alert('This is an alert message.'); } $('.mybtn').click(function(){ $(this).text('loading...').delay(5000).queue(function() { myFunction(); $(this).text('Click me'); $(this).dequeue(); }); }); }); </script> <button type="button" class="mybtn btn btn-primary">Click me</button> |
Output
Click the below button to see a function call after 5 seconds.
When you click the above button, it calls the jQuery function myFunction() to give an alert message. It also adds a ‘loading…’ text when you click the button to show that the function is loading until it reaches 5 seconds.
The example first changes the button text to ‘loading…’ on the button click. After a 5-second function call, it again changes the button text to ‘Click me’ using the text() of jQuery.
Call jQuery Function on Page Load
For calling on page load, you just need to call it on the page ready event. The below example runs the jQuery function without the need to click the button.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function() { function myFuncPageld(){ alert('This is an alert message on page load.'); } myFuncPageld(); }); </script> <button type="button" class="mybtn btn btn-primary">Click me</button> |
The above example contains the created function and function call on ready(). When you load the page, it calls the function immediately to execute the code inside the function.
How to Call Function on Button Click Using jQuery
To run the created jQuery function on button click, you have to use the jQuery click() and call the function inside it. The function contains the jQuery alert() message to display when someone clicks the button.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function() { function myFnBtnClick(){ alert('This is an alert message on button click.'); } $('.mybtnclick').click(function(){ myFnBtnClick(); }); }); </script> <button type="button" class="mybtnclick btn btn-primary">Click me</button> |
Output
Click the below button to see a function call on click.
Now, click the above button to see the executed code placed inside the jQuery function.
Calling on Checkbox Change in jQuery
The checkbox change event is the click event on the checkbox to check and uncheck the checkbox. In this event, you can call a jQuery function using the click() function. You can get the value of the checkbox to display with each click.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function() { function myFnChkClick(){ var checkval = jQuery('input[name="mycheck"]').val(); alert(checkval); } $('input[name="mycheck"]').click(function(){ myFnChkClick(); }); }); </script> <input type="checkbox" name="mycheck" value="mycheck"/> Male |
Output
Click the below checkbox to see a function call on click.
Male
When you click the button given above, you will get the value of the checkbox on each click. It does not matter whether the checkbox is checked or not in jQuery, you will still get the value.
You May Also Like to Read