访问Handlebar模板中的DOM元素

时间:2012-04-23 12:40:59

标签: javascript jquery handlebars.js

这一定比我做的更简单。不知道发生了什么。

我有一个DIV,我正在“填充”Handlebar模板。生成模板后,我使用jQuery slideDown打开面板来查看内容。现在我需要设置一个close函数来滑动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}}

1 个答案:

答案 0 :(得分:3)

我知道这是一个老问题,你可能已经找到了答案,但是,这是因为当你的JS代码运行时,DOM中不存在a.close

您需要在把手完成渲染模板后运行JS代码,或者绑定到页面加载(某种容器)上存在的更高级别DOM元素,然后仅为所需的链接激活。这样的事情(see the API):

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