javascript - 无法在初始化时绑定(bind)事件处理程序

Question

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

在创建音频元素后执行

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

但只有在创建元素后绑定(bind)事件才有效。我正在寻找一种将事件绑定(bind)到文档加载时所有 future “音频”标签的方法。以下不起作用:

从不工作

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

以下始终有效

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

我的目标是能够绑定(bind) these events加载我的文档时一次。任何帮助或见解将不胜感激。

编辑

因为我正在使用带有 turbolinks 的 Rails，所以我执行上面的代码片段，其中包含就绪事件和 onload 事件。所以代码是:

reload = ->
  #relevant code here

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

$ -> reload()

Answer 1

在您的文档完全加载后开始您的事件处理:

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

     });
});