How to use the on() method with the load event In JQuery
The on() method in jQuery is used to attach an event handler for any event to the selected elements. The window object is first selected using a selector and the on() method is used on this element with the load event and a callback function to be called on the occurrence of this event.
Syntax:
$(window).on('load', functionTobeLoaded() )
Example: The below example implements the on() method to load jQuery after the page gets loaded.
HTML
<!DOCTYPE html> < html > < head > < title > How to load jQuery code after page loading? </ title > < script src = "https://code.jquery.com/jquery-3.3.1.min.js" > </ script > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < b > How to load jQuery code after page loading? </ b > < p > The current datetime is: < span class = "date" ></ span > </ p > < script type = "text/javascript" > $(window).on('load', showDatetime()); function showDatetime() { document.querySelector(".date"). textContent = new Date(); } </ script > </ body > </ html > |
Output:
How to load jQuery code after loading the page?
In this article, we are going to discuss the different ways of loading the jQuery code after loading the page. The methods to accomplish this task are listed below:
Table of Content
- Using the on() method with the load event
- Using the ready() method
- Using the load() method
Contact Us