Question

This must be simpler than I’m making it out to be. Not sure what’s going on.

I have a DIV that I’m “filling” with a Handlebar template. Once the template is generated, I use a jQuery slideDown to open the panel to view the contents. Now I need to put a close function to slideUp the DIV.

I think the problem is the click function isn’t getting bound because the a.close element is within a script tag.

Here’s the DIV for the content:

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

Here’s the jQuery snippet. This is at the top of the HTML:

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

And a snippet of the template:

<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

I know this is an old question and you’ve probably already worked out the answer, but yes, it’s because at the time that your JS code runs, a.close does not exist in the DOM.

You need to either run the JS code after handlebars has finished rendering the template, or bind to a higher level DOM element that exists on page load (a container of some sort) and then activate only for the link that you want. Something like this (see the API):

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