title: $(document).ready() doesn't work
body: <p>This is the html code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="vendor/jquery.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready($(".voice").click(function() {
              alert("succeed");
          }));
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="voice-div"&gt;
              &lt;input type="text" class = "voice" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;&lt;!-- close class="wrapper" --&gt;
  
      &lt;!-- the support button on the top right --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I clicked the <code>input</code>, <code>alert</code> didn't pop up. But when I put </p>
  
  <pre><code>&lt;script&gt;
      $(document).ready($(".voice").click(function() {
          alert("succeed");
      }));
  &lt;/script&gt;
  </code></pre>
  
  <p>right before <code>&lt;/body&gt;</code>, it worked. Why? If I want to put the script in the <code>&lt;head&gt;...&lt;/head&gt;</code> part, how should I modify the code?</p>