title: Should all jquery events be bound to $(document)?
body: <h2>Where this is coming from</h2>
  
  <p>When I first learned jQuery, I normally attached events like this:</p>
  
  <pre><code>$('.my-widget a').click(function() {
      $(this).toggleClass('active');
  });
  </code></pre>
  
  <p>After learning more about selector speed and event delegation, I read in several places that "jQuery event delegation will make your code faster." So I started to write code like this:</p>
  
  <pre><code>$('.my-widget').on('click','a',function() {
      $(this).toggleClass('active');
  });
  </code></pre>
  
  <p>This was also the recommended way to replicate the behavior of the deprecated .live() event. Which is important to me since a lot of my sites dynamically add/remove widgets all the time. The above doesn't behave exactly like .live() though, since only  elements added to the already existing container '.my-widget' will get the behavior. If I dynamically add another block of html after that code has ran, those  elements will not get the events bound to them. Like this:</p>
  
  <pre><code>setTimeout(function() {
      $('body').append('&lt;div class="my-widget"&gt;&lt;a&gt;Click does nothing&lt;/a&gt;&lt;/div&gt;');
  }, 1000);
  </code></pre>
  
  <p><br></p>
  
  <h2>What I want to achieve:</h2>
  
  <ol>
  <li>the old behavior of .live() // meaning attaching events to not yet existent elements</li>
  <li>the benefits of .on()</li>
  <li>fastest performance to bind events</li>
  <li>Simple way to manage events</li>
  </ol>
  
  <p>I now attach all events like this:</p>
  
  <pre><code>$(document).on('click.my-widget-namespace', '.my-widget a', function() {
      $(this).toggleClass('active');
  });
  </code></pre>
  
  <p>Which seems to meet all my goals. (Yes it's slower in IE for some reason, no idea why?)
  It's fast because only a single event is tied to a singular element and the secondary selector is only evaluated when the event occurs (please correct me if this is wrong here). The namespace is awesome since it makes it easier to toggle the event listener. 
  <br>
  <br></p>
  
  <h2>My Solution/Question</h2>
  
  <p>So I'm starting to think that jQuery events should always be bound to $(document).<br>
  <strong>Is there any reason why you would not want to do this?<br>
  Could this be considered a best practice? If not, why?</strong></p>
  
  <p>If you've read this whole thing, thank you. I appreciate any/all feedback/insights. </p>
  
  <p>Assumptions:</p>
  
  <ol>
  <li>Using jQuery that supports <code>.on()</code> // at least version 1.7</li>
  <li>You want the the event to be added to dynamically added content</li>
  </ol>
  
  <p>Readings/Examples:</p>
  
  <ol>
  <li><a href="http://24ways.org/2011/your-jquery-now-with-less-suck" rel="noreferrer">http://24ways.org/2011/your-jquery-now-with-less-suck</a></li>
  <li><a href="http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery" rel="noreferrer">http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery</a></li>
  <li><a href="http://www.jasonbuckboyer.com/playground/speed/speed.html" rel="noreferrer">http://www.jasonbuckboyer.com/playground/speed/speed.html</a></li>
  <li><a href="http://api.jquery.com/on/" rel="noreferrer">http://api.jquery.com/on/</a></li>
  </ol>