jQuery, finding controls within HTML template
<p>I'm using an html template:</p>

<pre><code>&lt;script id="locationTemplate" type="application/template" &gt;

    &lt;p&gt;
        &lt;input id="searchText" type="text" /&gt;
        &lt;input id="searchlocation" type="submit" value="Search" /&gt;
    &lt;/p&gt;

    &lt;p&gt;
        &lt;label&gt;Location Name&lt;/label&gt;
        &lt;input id="locationName" type="text" /&gt;
    &lt;/p&gt;


    &lt;div id="map"&gt;&lt;/div&gt;

&lt;/script&gt;
</code></pre>

<p>I can load the template ok, but when I try to find the controls within the template, I can not.</p>

<pre><code>    this.template = $('#locationTemplate');
    this.searchText = $(this.template.html()).find('input#searchText');
    this.locationName = this.template.find('p input#locationName');
</code></pre>

<p>What am I missing here? I've tried two different approaches.</p>

<p><strong>Update:</strong></p>

<p>I got this code to work:</p>

<pre><code>    this.template = $('#locationTemplate');
    this.searchText = $(this.template.html()).find('input#searchText');
    this.locationName = $(this.template.html()).find('input#locationName');
</code></pre>

<p>But I am confused why I have to dump the html into another instance of jQuery. Why can't I just use the template.find method since template is already wrapped in jQuery...</p>
