在手柄模板中訪問DOM元素

這一定比我想象的要簡單。不知道發生了什麼事。在手柄模板中訪問DOM元素

我有一個DIV，我用手柄模板「填充」。生成模板後，我使用jQuery slideDown打開面板查看內容。現在我需要放一個關閉功能來滑動DIV。

我認爲問題在於click函數沒有被綁定，因爲a.close元素在腳本標籤內。

下面是對內容的DIV：

<div id="characteristic" style="bottom:0px; width:800px; display:none; position:fixed; left: 350px;"></div>

這裏是jQuery的片段。這是在HTML的頂部：

$(document).ready(function(e){ 
    $("a.close").click(function(e) { 
    e.preventDefault(); 
    $("#characteristic").slideUp(); 
    }); 
});

和模板片段：

<script id="ac-template" type="text/x-handlebars-template"> 
    <div class="holder" style="background-color:#FFFFFF;"> 
     <div class="frame"> 
      <div class="content"> 
       <div class="info-box-holder"> 
        <a class="close" href="">&times;</a> 
        <div class="heading"> 
         <h2>ACTIONABLE CHARACTERISTIC</h2> 
        </div> 
        <div class="info-box"> 
         <a href="#"><img class="alignleft" src="{{image_large}}" alt="" width="400" height="400" /></a> 
         {{#if subcategory_name}} 
          <h2>{{subcategory_name}}: {{name}}</h2> 
         {{else}} 
          <h2>{{category_name}}: {{name}}</h2> 
         {{/if}}

來源

2012-04-23 spdaly

特徵ID在哪裏？ – Amberlamps 2012-04-23 12:44:35

也許您需要在模板渲染後運行準備好的函數中的代碼，因爲在onload期間控件可能不存在 – 2012-04-23 13:13:44

@Amberlamps我已經添加了DIV的代碼。 – spdaly 2012-04-23 14:17:56

我知道這是一個老問題，你可能已經制定出了答案，但肯定，這是因爲當時你的JS代碼運行時，DOM中不存在a.close。

您需要在handlebars完成呈現模板之後運行JS代碼，或者綁定到頁面加載時存在的更高級DOM元素（某種類型的容器），然後僅激活您想要的鏈接。像這樣（see the API）：

$(document).ready(function(e){ 
    $("#mycontainerdiv").on('click', 'div.info-box-holder a.close', function(e) { 
    e.preventDefault(); 
    $("#characteristic").slideUp(); 
    }); 
});

來源

2012-05-02 00:02:01

在手柄模板中訪問DOM元素

回答

相關問題