title: How do I add event listeners to Handlebars templates after compilation?
body: <p>I have a simple template setup that looks like this:</p>
  
  <pre><code>&lt;script id="entry" type="text/x-handlebars-template"&gt;                                                                                                                                                           
  
    &lt;p&gt;Some content&lt;/p&gt;                                                                                                                                                                                           
    &lt;h2&gt;Language Select:&lt;/h2&gt;                                                                                                                                                                                     
  
    &lt;button type="button" class="btn btn-primary"&gt;English&lt;/button&gt;                                                                                                                                                                                                                                                                                               
  
    &lt;h2&gt;Ready:&lt;/h2&gt;                                                                                                                                                                                               
    &lt;button type="button" id="play" class="btn btn-success"&gt;Play&lt;/button&gt;                                                                                                                                         
    &lt;button type="button" id="stop" class="btn btn-danger"&gt;Stop&lt;/button&gt;                                                                                                                                                                                                                                                                                                               
  
  &lt;/script&gt;
  </code></pre>
  
  <p>However, also in my document I have a script with the following content:</p>
  
  <pre><code>var playButton = document.querySelector('#play');
  
  playButton.addEventListener('click', function (e) {                                                                                                                                                               
    sendMessage('Cue', 'Play');                                                                                                                                                                                     
  }, false);  
  </code></pre>
  
  <p>Most of the time, (but not always) because of the async nature of javascript, this returns:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'addEventListener' of null</code></p>
  
  <p>If I wrap that code in a <code>setTimeout</code> of some amount, it will always work.</p>
  
  <p>Can someone please explain to me the best way to add event listeners from scripts to generated template content?</p>
  
  <p>I looked at <a href="https://stackoverflow.com/questions/17548265/handling-jquery-onclick-event-on-handlebars">this answer</a> but it seems like the way they suggest is just to add a delay before adding the event listener.</p>