Note that there are some explanatory texts on larger screens.

plurals
  1. POAccessing DOM elements within a Handlebar template
    primarykey
    data
    text
    <p>This must be simpler than I'm making it out to be. Not sure what's going on.</p> <p>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. </p> <p>I think the problem is the click function isn't getting bound because the a.close element is within a script tag.</p> <p>Here's the DIV for the content: </p> <pre><code>&lt;div id="characteristic" style="bottom:0px; width:800px; display:none; position:fixed; left: 350px;"&gt;&lt;/div&gt; </code></pre> <p>Here's the jQuery snippet. This is at the top of the HTML:</p> <pre><code>$(document).ready(function(e){ $("a.close").click(function(e) { e.preventDefault(); $("#characteristic").slideUp(); }); }); </code></pre> <p>And a snippet of the template:</p> <pre><code>&lt;script id="ac-template" type="text/x-handlebars-template"&gt; &lt;div class="holder" style="background-color:#FFFFFF;"&gt; &lt;div class="frame"&gt; &lt;div class="content"&gt; &lt;div class="info-box-holder"&gt; &lt;a class="close" href=""&gt;&amp;times;&lt;/a&gt; &lt;div class="heading"&gt; &lt;h2&gt;ACTIONABLE CHARACTERISTIC&lt;/h2&gt; &lt;/div&gt; &lt;div class="info-box"&gt; &lt;a href="#"&gt;&lt;img class="alignleft" src="{{image_large}}" alt="" width="400" height="400" /&gt;&lt;/a&gt; {{#if subcategory_name}} &lt;h2&gt;{{subcategory_name}}: {{name}}&lt;/h2&gt; {{else}} &lt;h2&gt;{{category_name}}: {{name}}&lt;/h2&gt; {{/if}} </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload