无法在初始化时绑定事件处理程序

Question

我有一个动态创建音频预览元素的表单。 我想在浏览器处理完音频元素后执行代码。 以下作品：

如果在创建音频元素之后执行，则可以工作

  $('audio').on('loadeddata', ->
    alert "test audio"
  )

但是它仅在创建元素后绑定事件时才有效。 我正在寻找一种在文档加载时将事件绑定到所有将来的“音频”标签的方法。 以下内容不起作用：

永远不行

$(document).on('loadeddata', 'audio', ->
  alert "test audio"
)

以下始终有效

$(document).on('click', 'audio', ->
  alert "test audio"
)

我的目标是在加载文档时能够绑定这些事件 。 任何帮助或见解将不胜感激。

编辑

因为我将Rails与Turbolinks一起使用，所以我同时执行了上述代码段以及ready和onload事件。 所以代码是：

reload = ->
  #relevant code here

$(document).on 'page:load', reload

$ -> reload()

Answer 1

文档完全加载后，开始事件处理：

$(document).ready(function(){
    $(document).on('loadeddata', 'audio', function(){
      alert "test audio"

     });
});

Answer 2

尝试将这些事件绑定到内部

$(document).ready(function(){
        // bind your events here
});