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

您无法将模板放入＆lt; script＆gt;标签。它会阻止解析器解析内部的东西，因此它不会显示在DOM中，因此选择器将不会在它上面工作。

Answer 2

我刚刚遇到这个。获取对象的唯一方法是首先选择模板外部存在的DOM项并深入其中。因此，对于附加在现有UL内部的列表项的模板，我可以这样做：

//Click Handler for the Line Items 
$("#current-list").delegate("li", "click", function() {
    var id = $(this).children(".line-item").children(".command-button-item").attr("id");
    alert(id); //this alerts a correct value
    alert($(id).attr("id")); //this alerts undefined? when selecting by id
});

jQuery，在HTML模板中查找控件

2 个答案: