← Back to jQuery Course | Chapter 1: Getting Started | Lesson 4 of 6

Document Ready इवेंट

document ready event page structure तैयार होने के बाद चलता है।

In this page:

  1. Document Ready क्यों मायने रखता है
  2. Basic Ready Syntax
  3. एक Function के साथ Ready
  4. Ready और Button Events
  5. Modern Shorthand
Syntax
javascript 
$(document).ready(function () {
  // code runs when the DOM is ready
});

$(function () {
  // shorthand
});

Document Ready क्यों मायने रखता है

HTML load होना खत्म होने से पहले jQuery code चलाने का मतलब है कि आप जिन elements को select करने की कोशिश कर रहे हैं वे अभी बस मौजूद ही नहीं होंगे, इसलिए scripts चुपचाप fail हो जाते हैं।

उदाहरण: Why Document Ready Matters

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
      // runs while the <head> is parsed: #msg does not exist yet
      var earlyMatches = $("#msg").length;
      $("#msg").text("This fails silently, #msg does not exist yet");
    </script>
  <style>
    body { font-family: sans-serif; padding: 12px; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
    .stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
    .stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
    .item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
    .done { text-decoration: line-through; color: #a33; }
    ul.stage { padding-left: 32px; }
    ul.stage:empty::after { content: "(empty)"; color: #999; }
    ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
    .box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
    .box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
    #output:empty::before { content: "Output appears here"; color: #888; }
  </style>
</head>
<body>
  <button id="earlyBtn">Show what the head script did</button><button id="readyBtn">Run it inside ready()</button><button id="resetBtn" class="secondary">Reset</button>
  <p id="msg" class="item">Original</p>
  <div id="output"></div>
  <script>
    $("#earlyBtn").click(function () {
      $("#output").text("Head script found " + earlyMatches + " element(s) matching #msg, so its .text() call changed nothing.\n#msg still reads: \"" + $("#msg").text() + "\"");
    });
    $("#readyBtn").click(function () {
      $(document).ready(function () {
        $("#msg").text("This works, #msg exists now");
      });
      $("#output").text("Same call inside $(document).ready() found " + $("#msg").length + " element and updated it");
    });
    $("#resetBtn").click(function () {
      $("#msg").text("Original");
      $("#output").text("");
    });
  </script>
</body>
</html>

Basic Ready Syntax

$(document).ready(function(){...}) आपके code को तब तक delay करता है जब तक browser पूरे HTML structure को parse नहीं कर लेता, guarantee करते हुए कि callback में आप जिस भी element को reference करें वह असल में DOM में मौजूद है।

उदाहरण: Basic Ready Syntax

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p id="msg">Original</p>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#msg").text("DOM is ready");
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

एक Function के साथ Ready

आप एक single ready callback के अंदर कितने भी jQuery statements रख सकते हैं, और document parse होने पर वे सब एक साथ चलेंगे -- ज़्यादातर beginner jQuery pages अपना पूरा script यहीं रखते हैं।

उदाहरण: Ready with a Function

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p id="a">A</p><p id="b">B</p>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#a").text("Updated A");
      $("#b").text("Updated B");
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Ready और Button Events

document ready के अंदर click और दूसरे event handlers attach करना ज़रूरी है, क्योंकि अभी तक मौजूद न हुए किसी element पर एक handler bind करना चुपचाप कुछ नहीं करता -- handler बस कभी attach ही नहीं होता।

उदाहरण: Ready and Button Events

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="btn">Click</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").click(function() {
        $("#output").append($("<div>").text("Handler attached inside ready, works correctly"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Modern Shorthand

shorthand $(function(){...}) functionally $(document).ready(...) जैसा ही है लेकिन लिखने में छोटा, और यह वही form है जो आप real-world jQuery code और tutorials में सबसे ज़्यादा देखेंगे।

उदाहरण: Modern Shorthand

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p id="msg">Original</p>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#msg").text("Shorthand ready works too");
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

Window और Document Events · Hover Event क्या है · jQuery Event Object क्या है · Event Propagation और Bubbling

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. body मौजूद होने से पहले head में $("#msg").text(...) चलाना, इसलिए selector किसी से भी match नहीं करता और jQuery बिना किसी error के चुपचाप fail हो जाता है।
  2. ready callback के बाहर किसी ऐसे element के लिए click handler bind करना जो अभी DOM में नहीं है, इसलिए handler कभी attach नहीं होता।
  3. जब script पहले से body के आख़िर में हो तब भी $(document).ready जोड़ना, या closing }); भूल जाना, जो एक syntax error छोड़ देता है।
🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson jQuery Syntax Next Lesson → jQuery CDN Fallbacks

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.