title: Unable to bind event handler at init
body: <p>I have a form in which audio preview elements are created dynamically.  I want to execute code after the audio elements have been processed by the browser.  The following works:</p>
  
  <p><strong><em>Works if executed after audio elements have been created</em></strong></p>
  
  <pre><code>  $('audio').on('loadeddata', -&gt;
      alert "test audio"
    )
  </code></pre>
  
  <p>but it only works if I bind the event after the element has been created.  I am looking for a way to bind the event to all future 'audio' tags at document onload.  The following does not work:</p>
  
  <p><strong><em>Never Works</em></strong></p>
  
  <pre><code>$(document).on('loadeddata', 'audio', -&gt;
    alert "test audio"
  )
  </code></pre>
  
  <p><strong><em>The following always works</em></strong></p>
  
  <pre><code>$(document).on('click', 'audio', -&gt;
    alert "test audio"
  )
  </code></pre>
  
  <p>My goal is to be able to bind <a href="http://www.w3schools.com/tags/av_event_loadeddata.asp" rel="nofollow">these events</a> once when my document is loaded.  Any help or insights would be greatly appreciated.</p>
  
  <p><strong><em>Edit</em></strong></p>
  
  <p>because I am using rails with turbolinks I execute The above snippets with both ready and onload events.  So the code is:</p>
  
  <pre><code>reload = -&gt;
    #relevant code here
  
  $(document).on 'page:load', reload
  
  $ -&gt; reload()
  </code></pre>