jQuery selector for dynamically generated element
<p>I have the following html snippet:</p>

<pre><code>&lt;div id="contentX"&gt;&lt;h1&gt;MyHeading1&lt;/h1&gt;&lt;/div&gt;
</code></pre>

<p>I could select with jQuery snippet syccessfully with the following:</p>

<pre><code>console.log($('#contentX h1'));
</code></pre>

<p>The output is</p>

<pre><code>[&lt;h1&gt;​MyHeading1​&lt;/h1&gt;​]
</code></pre>

<p>However, it did <strong>not</strong> work when I dynamically loaded the contents. For example,</p>

<p>html code snippet:</p>

<pre><code>&lt;div id="content"&gt;&lt;/div&gt;
</code></pre>

<p>jQuery code snippet:</p>

<pre><code>$('#content').load('foo.html')); // the content is loaded correctly with &lt;h1&gt; tag
</code></pre>

<p>jQuery code snippet does <strong>not</strong> work:</p>

<pre><code>console.log($('#content h1')); // it returns []. I was expecting to return something.
</code></pre>

<p>I am wondering if this is a similar behavior like event binding: .click() vs .live().</p>

<p>Thanks in advance for your help.</p>
