javascript - 访问 Handlebar 模板中的 DOM 元素

Question

这一定比我想象的要简单。不确定发生了什么。

我有一个 DIV，我正在用 Handlebar 模板“填充”它。生成模板后，我使用 jQuery slideDown 打开面板以查看内容。现在我需要在 DIV 上滑动一个关闭函数。

我认为问题在于点击功能未被绑定(bind)，因为 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}}

Answer 1

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

您需要在 handlebars 完成模板呈现后运行 JS 代码，或者绑定(bind)到页面加载时存在的更高级别的 DOM 元素(某种容器)，然后只为您想要的链接激活。像这样 ( see the API ):

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