title: jQuery: Binding events - in $(document).ready or html DOM event handler?
body: <p>There is one question about jQuery and good using I am asking myself for a while.
  Is there a difference between setting an event handler through jQuery in <code>$(documemt).ready()</code> an setting it in HTML in the DOM event handler?</p>
  <p>To make it a little bit clearer: I don't want longer loadtimes by adding many events to my site.
  An example: I want to add an ajax dropdown to display the new messages in my forum instead of just redirect to the inbox. I got two ways to do this.</p>
  <h2>• the jQuery way =&gt; <code>$(documemt).ready()</code></h2>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
      $(&quot;.new_messages_link&quot;).click(function (e) {
          e.preventDefault();
          // Ajax query an showing the dropdown
      });
  });
  </code></pre>
  <p>Just bind the event handler in jQuery, after the site is loaded. Probleme here is, that the the click only works after the site is fully loaded. A problem with large images, that slows the site down.</p>
  <h2>• the html DOM way</h2>
  <pre class="lang-html prettyprint-override"><code>&lt;a href=&quot;#&quot; class=&quot;new_messages_link&quot; onClick=&quot;show_new_messages(this); return false;&quot;&gt;New Messages&lt;/a&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>function show_new_messages(var element) {
      // Ajax query an showing the dropdown
  }
  </code></pre>
  <p>This is no strict programming, you need to change the html, if you change the method, but you don't need to wait for <code>$(documemt).ready()</code>. Also there is no load during showing the site, just if you click, am I right?</p>
  <h3>The Problem:</h3>
  <p>So my question is, what should I use? What is better, what is the real difference? And for information, it is not just one event handler I want to set, there are many, so loading time is important.
  I am not sure, I have a bad feeling in putting too much code in <code>$(documemt).ready()</code> functions.</p>