title: JQuery: Best way to bind events to dynamically created elements
body: <p>Consider the following:</p>
  
  <pre><code>var template = '&lt;div class="dynamic"&gt;Some markup&lt;/div&gt;'
    , $template = $(template);
  $template.on('click.namespace.data-api', function(e) { doStuff() });
  $('div.#parent').append($template);
  </code></pre>
  
  <p>To me, this seems to be the most optimal way to bind an event to a node, since the event is attached to a node that has already been introduced as a jQuery object. However, I'm not sure how this plays out during actual click events; on click, is jQuery able to find this element immediately since the event is bound to a jQuery object? Or is it more optimal to bind the event using something like: </p>
  
  <pre><code>var template = '&lt;div class="dynamic"&gt;Some markup&lt;/div&gt;'
    , $template = $(template);
  $('div.#parent').append($template);
  $('div.#parent').on('click.namespace.data-api', 'div.dynamic', function(e) { doStuff() });
  </code></pre>