jQuery, trouver des contrôles dans les modèles

Question

HTML J'utilise un modèle 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> 

je peux charger le modèle ok, mais lorsque je tente de trouver les contrôles dans le modèle, je ne peux pas.

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

Que manque-t-il ici? J'ai essayé deux approches différentes.

Mise à jour:

Je suis arrivé que ce code fonctionne:

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

Mais je suis confus pourquoi je dois vider le code HTML dans une autre instance de jQuery. Pourquoi ne puis-je pas simplement utiliser la méthode template.find puisque le modèle est déjà enveloppé dans jQuery ...

Answer 1

Vous ne pouvez pas mettre votre modèle dans une balise <script>. Cela empêche l'analyseur d'analyser le contenu à l'intérieur, de sorte qu'il n'apparaîtra pas dans le DOM, donc les sélecteurs ne fonctionneront pas dessus.

Answer 2

Je viens de le rencontrer. La seule façon d'accéder à l'objet est de commencer en sélectionnant un élément DOM qui existait en dehors du modèle et de l'explorer. Donc, pour un modèle d'éléments de liste qui ont été ajouté à l'intérieur d'un I UL existant pourrait le faire:

//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 
});