File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><!--[if IE 7 ]> <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]--><!--[if IE 8 ]> <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]--><!--[if IE 9 ]> <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]--><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="author" content="JS Foundation - js.foundation"><meta name="description" content=""><meta name="viewport" content="width=device-width">
<link href="//learn.jquery.com/jquery-wp-content/themes/learn.jquery.com/i/favicon.ico" rel="shortcut icon" />
<link href="//learn.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1" rel="stylesheet" />
<link href="//learn.jquery.com/jquery-wp-content/themes/learn.jquery.com/style.css" rel="stylesheet" /><script src="//learn.jquery.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script><script src="https://code.jquery.com/jquery-1.11.3.js"></script><script src="//learn.jquery.com/jquery-wp-content/themes/jquery/js/plugins.js"></script><script src="//learn.jquery.com/jquery-wp-content/themes/jquery/js/main.js"></script><script src="https://use.typekit.net/wde1aof.js"></script><script>try{Typekit.load();}catch(e){}</script><!-- at the end of the HEAD -->
<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet" />
<link href="//learn.jquery.com/jquery-wp-content/themes/jquery/css/docsearch.css" rel="stylesheet" />
<link href="//learn.jquery.com/wp-json/" rel="https://api.w.org/" /><meta name="generator" content="WordPress 4.5.2" />
<link href="//learn.jquery.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flearn.jquery.com%2Fusing-jquery-core%2Fdocument-ready%2F" rel="alternate" type="application/json+oembed" />
<link href="//learn.jquery.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flearn.jquery.com%2Fusing-jquery-core%2Fdocument-ready%2F&format=xml" rel="alternate" type="text/xml+oembed" />
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="projects">
<li class="project jquery"><a href="https://jquery.com/" title="jQuery">jQuery</a></li>
<li class="project jquery-ui"><a href="https://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
<li class="project jquery-mobile"><a href="https://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
<li class="project sizzlejs"><a href="https://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
<li class="project qunitjs"><a href="https://qunitjs.com/" title="QUnit">QUnit</a></li>
</ul>
<ul class="links">
<li><a href="https://plugins.jquery.com/">Plugins</a></li>
<li class="dropdown"><a href="https://contribute.jquery.org/">Contribute</a>
<ul>
<li><a href="https://js.foundation/CLA">CLA</a></li>
<li><a href="https://contribute.jquery.org/style-guide/">Style Guides</a></li>
<li><a href="https://contribute.jquery.org/triage/">Bug Triage</a></li>
<li><a href="https://contribute.jquery.org/code/">Code</a></li>
<li><a href="https://contribute.jquery.org/documentation/">Documentation</a></li>
<li><a href="https://contribute.jquery.org/web-sites/">Web Sites</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://js.foundation/events">Events</a>
<ul class="wide">
</ul>
</li>
<li class="dropdown"><a href="https://jquery.org/support/">Support</a>
<ul>
<li><a href="https://learn.jquery.com/">Learning Center</a></li>
<li><a href="https://irc.jquery.org/">IRC/Chat</a></li>
<li><a href="https://forum.jquery.com/">Forums</a></li>
<li><a href="https://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
<li><a href="https://jquery.org/support/">Commercial Support</a></li>
</ul>
</li>
<li class="dropdown"><a href="https://js.foundation/">JS Foundation</a>
<ul>
<li><a href="https://js.foundation/about/join">Join</a></li>
<li><a href="https://js.foundation/about/members">Members</a></li>
<li><a href="https://js.foundation/about/leadership">Leadership</a></li>
<li><a href="https://js.foundation/community/code-of-conduct">Conduct</a></li>
<li><a href="https://js.foundation/about/donate">Donate</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</section>
</header>
<div id="container">
<div class="constrain clearfix" id="logo-events">
<h2 class="logo"><a href="/" title="jQuery Learning Center">jQuery Learning Center</a></h2>
<aside>
<div id="broadcast"><a href="https://js.foundation/about/donate" title="Support the JS Foundation"><img alt="Support the JS Foundation" border="0" height="100" src="/jquery-wp-content/themes/jquery/content/donate.png" title="Support the JS Foundation" width="400" /></a></div>
</aside>
</div>
<nav class="constrain clearfix" id="main">
<div class="menu-top-container">
<ul class="menu" id="menu-top">
<li class="menu-item"><a href="https://learn.jquery.com">Home</a></li>
<li class="menu-item"><a href="https://learn.jquery.com/about/">About</a></li>
<li class="menu-item"><a href="https://learn.jquery.com/contributing/">Contributing</a></li>
<li class="menu-item"><a href="https://learn.jquery.com/style-guide/">Style Guide</a></li>
</ul>
</div>
<form action="//learn.jquery.com/" class="searchform" method="get"><button class="icon-search" type="submit"><span class="visuallyhidden">search</span></button><label><span class="visuallyhidden">Search jQuery Learning Center</span> <input name="s" placeholder="Search" type="text" value="" /> </label></form>
</nav>
<div class="clearfix row" id="content-wrapper">
<div class="beta-ribbon-wrapper">
<div class="beta-ribbon"><a href="/about/#beta">Beta</a></div>
</div>
<div class="content-right twelve columns">
<div id="content">
<div class="post-heirarchy">Posted in: <a href="http://learn.jquery.com/using-jquery-core/">Using jQuery Core</a></div>
<article class="post-123 page type-page status-publish hentry" id="post-123">
<header class="entry-header">
<h1 class="entry-title">$( document ).ready()</h1>
</header>
<div class="entry-content">
<p>A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside <code>$( document ).ready()</code> will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside <code>$( window ).on( "load", function() { ... })</code> will run once the entire page (images or iframes), not just the DOM, is ready.</p>
<div class="syntaxhighlighter javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre>
</pre>
<div class="container">
<div class="line"><code><span class="comment">// A $( document ).ready() block.</span></code></div>
</div>
<div class="container">
<div class="line"><code>$( document ).ready(<span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">"ready!"</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>Experienced developers sometimes use the shorthand <code>$()</code> for <code>$( document ).ready()</code>. If you are writing code that people who aren't experienced with jQuery may see, it's best to use the long form.</p>
<div class="syntaxhighlighter javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre>
</pre>
<div class="container">
<div class="line"><code><span class="comment">// Shorthand for $( document ).ready()</span></code></div>
</div>
<div class="container">
<div class="line"><code>$(<span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">"ready!"</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>You can also pass a named function to <code>$( document ).ready()</code> instead of passing an anonymous function.</p>
<div class="syntaxhighlighter javascript">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
</td>
<td class="code">
<pre>
</pre>
<div class="container">
<div class="line"><code><span class="comment">// Passing a named function instead of an anonymous function.</span></code></div>
</div>
<div class="container">
<div class="line"> </div>
</div>
<div class="container">
<div class="line"><code><span class="function"><span class="keyword">function</span> <span class="title">readyFn</span><span class="params">( jQuery )</span> {</span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="comment">// Code to run when the document is ready.</span></code></div>
</div>
<div class="container">
<div class="line"><code>}</code></div>
</div>
<div class="container">
<div class="line"> </div>
</div>
<div class="container">
<div class="line"><code>$( document ).ready( readyFn );</code></div>
</div>
<div class="container">
<div class="line"><code><span class="comment">// or:</span></code></div>
</div>
<div class="container">
<div class="line"><code>$( window ).on( <span class="string">"load"</span>, readyFn );</code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>The example below shows <code>$( document ).ready()</code> and <code>$( window ).on( "load" )</code> in action. The code tries to load a website URL in an <code><iframe></code> and checks for both events:</p>
<div class="syntaxhighlighter xml">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
</td>
<td class="code">
<pre>
</pre>
<div class="container">
<div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-1.9.1.min.js"</span>></span><span class="tag"></<span class="title">script</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"><<span class="title">script</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code>$( document ).ready(<span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">"document loaded"</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
<div class="container">
<div class="line"> </div>
</div>
<div class="container">
<div class="line"><code>$( window ).on( <span class="string">"load"</span>, <span class="keyword">function</span>() {</code></div>
</div>
<div class="container">
<div class="line"><code>console.log( <span class="string">"window loaded"</span> );</code></div>
</div>
<div class="container">
<div class="line"><code>});</code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"><<span class="title">iframe</span> <span class="attribute">src</span>=<span class="value">"http://techcrunch.com"</span>></span><span class="tag"></<span class="title">iframe</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div>
</div>
<div class="container">
<div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-meta row">
<div class="bottom-links row">
<div class="prev six columns"><a href="http://learn.jquery.com/using-jquery-core/dollar-object-vs-function/">$ vs $() </a></div>
<div class="next six columns"><a href="http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/">Avoiding Conflicts with Other Libraries </a></div>
</div>
<aside class="meta-details six columns">
<h3>Last Updated</h3>
<ul>
<li class="icon-calendar icon-large" title="Last Updated"><span>January 16, 2017</span></li>
</ul>
</aside>
<aside class="github-feedback six columns">
<h3>Suggestions, Problems, Feedback?</h3>
<a class="button dark" href="https://github.com/jquery/learn.jquery.com/tree/master/page/using-jquery-core/document-ready.md">Open an Issue or Submit a Pull Request on GitHub</a></aside>
</div>
</article>
</div>
<div class="widget-area" id="sidebar" role="complementary">
<aside class="widget" id="chapter-listing">
<h3 class="widget-title">Chapters</h3>
<ul>
<li><a href="//learn.jquery.com/about-jquery/">About jQuery </a></li>
<li class="active"><a href="//learn.jquery.com/using-jquery-core/">Using jQuery Core </a>
<ul class="sub-chapter">
<li><a href="//learn.jquery.com/using-jquery-core/faq/">Frequently Asked Questions </a></li>
</ul>
</li>
<li><a href="//learn.jquery.com/events/">Events </a></li>
<li><a href="//learn.jquery.com/effects/">Effects </a></li>
<li><a href="//learn.jquery.com/ajax/">Ajax </a></li>
<li><a href="//learn.jquery.com/plugins/">Plugins </a></li>
<li><a href="//learn.jquery.com/performance/">Performance </a></li>
<li><a href="//learn.jquery.com/code-organization/">Code Organization </a>
<ul class="sub-chapter">
<li><a href="//learn.jquery.com/code-organization/deferreds/">Deferreds </a></li>
</ul>
</li>
<li><a href="//learn.jquery.com/jquery-ui/">jQuery UI </a>
<ul class="sub-chapter">
<li><a href="//learn.jquery.com/jquery-ui/widget-factory/">Widget Factory </a></li>
<li><a href="//learn.jquery.com/jquery-ui/environments/">Using jQuery UI </a></li>
</ul>
</li>
<li><a href="//learn.jquery.com/jquery-mobile/">jQuery Mobile </a></li>
</ul>
</aside>
</div>
<!-- #sidebar .widget-area --></div>
</div>
</div>
<footer class="clearfix simple">
<div class="constrain">
<div class="row">
<div class="six columns offset-by-three">
<h3><span>Books</span></h3>
<ul class="books">
<li><a href="https://www.packtpub.com/web-development/learning-jquery-fourth-edition"><img alt="Learning jQuery 4th Edition by Karl Swedberg and Jonathan Chaffer" height="114" src="//learn.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" width="92" /> Learning jQuery Fourth Edition <cite>Karl Swedberg and Jonathan Chaffer</cite> </a></li>
<li><a href="https://www.manning.com/books/jquery-in-action-third-edition"><img alt="jQuery in Action by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa" height="114" src="//learn.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" width="92" /> jQuery in Action <cite>Bear Bibeault, Yehuda Katz, and Aurelio De Rosa</cite> </a></li>
<li><a href="https://www.syncfusion.com/ebooks/jquery"><img alt="jQuery Succinctly by Cody Lindley" height="114" src="//learn.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" width="92" /> jQuery Succinctly <cite>Cody Lindley</cite> </a></li>
</ul>
</div>
</div>
<div id="legal">
<ul class="footer-site-links">
<li><a class="icon-pencil" href="https://learn.jquery.com/">Learning Center</a></li>
<li><a class="icon-group" href="https://forum.jquery.com/">Forum</a></li>
<li><a class="icon-wrench" href="https://api.jquery.com/">API</a></li>
<li><a class="icon-twitter" href="https://twitter.com/jquery">Twitter</a></li>
<li><a class="icon-comments" href="https://irc.jquery.org/">IRC</a></li>
<li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
</ul>
<p class="copyright">Copyright 2018 <a href="https://jquery.org/team/">The jQuery Foundation</a>. <a href="https://jquery.org/license/">jQuery License</a> <span class="sponsor-line"><a class="do-link" href="https://www.digitalocean.com">Web hosting by Digital Ocean</a> | <a class="sp-link" href="https://www.stackpath.com">CDN by StackPath</a></span></p>
</div>
</div>
</footer>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1076265-1']);
_gaq.push(['_setDomainName', 'learn.jquery.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script><script type='text/javascript' src='//learn.jquery.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script><script type='text/javascript' src='//learn.jquery.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script><!-- at the end of the BODY --><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" onload="docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
indexName: 'jquery',
inputSelector: 'input[name=\'s\']',
debug: true // Set debug to true if you want to inspect the dropdown
})" async></script>