title: JQuery Selector on Dynamically Added Element
body: <p>I can't figure out how to coax JQuery in to selecting an element (not binding handlers) that is dynamically inserted in to the DOM after the page loads.</p>
  
  <p>For example:</p>
  
  <p>If I have HTML:</p>
  
  <pre><code>&lt;div id="bar"&gt;
   World!
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I create a new element and insert it in to DOM:</p>
  
  <pre><code>var foo = '&lt;div id="foo"&gt;Hello&lt;/div&gt;';
  $("#bar").before(foo);
  </code></pre>
  
  <p>I end up with this:</p>
  
  <pre><code>&lt;div id="foo"&gt;Hello&lt;/div&gt;
  &lt;div id="bar"&gt;
   World!
  &lt;/div&gt;
  </code></pre>
  
  <p>Later on I might want to do something different with the element I inserted, using JQuery to manipulate that new element. But if I try to do:</p>
  
  <pre><code>myHappyEl = $("#foo");
  </code></pre>
  
  <p>Then myHappyEl will be undefined. JQuery doesn't see it, presumably because it go attached after DOM was loaded.</p>
  
  <p>I've seen lots of suggestions addressing a possibly related but subtly different issue, wherein the solution is to use .live()/.on() to attach an event listener when an element comes in to being. That would be brilliant if I wanted to capture a click event or something, but I don't; I want to be able to select the dynamically added element(s).</p>