jQuery，在 HTML 模板中查找控件

Question

我正在使用 html 模板:

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

我可以正常加载模板，但是当我尝试在模板中查找控件时，却找不到。

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

我在这里缺少什么？我尝试了两种不同的方法。

更新:

我让这段代码可以工作:

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

但是我很困惑为什么我必须将 html 转储到另一个 jQuery 实例中。为什么我不能只使用 template.find 方法，因为模板已经包装在 jQuery 中...

Answer 1

您不能将模板放入 <script> 标记中。它会阻止解析器解析内部内容，因此它不会显示在 DOM 中，因此选择器不会对其起作用。