jQuery, finding controls within HTML template

Question

I'm using an html template:

<script id="locationTemplate" type="application/template" >

    <p>
        <input id="searchText" type="text" />
        <input id="searchlocation" type="submit" value="Search" />
    </p>

    <p>
        <label>Location Name</label>
        <input id="locationName" type="text" />
    </p>


    <div id="map"></div>

</script>

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

    this.template = $('#locationTemplate');
    this.searchText = $(this.template.html()).find('input#searchText');
    this.locationName = this.template.find('p input#locationName');

What am I missing here? I've tried two different approaches.

Update:

I got this code to work:

    this.template = $('#locationTemplate');
    this.searchText = $(this.template.html()).find('input#searchText');
    this.locationName = $(this.template.html()).find('input#locationName');

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...

Answer 1

You can't put your template in a <script> tag. It stops the parser from parsing the stuff inside, so it won't show up in the DOM, so selectors won't work on it.